Spire.Cloud 私有化部署完成后，可以在本地服务器上使用 Spire.Cloud 在线编辑服务在线创建、编辑、保存和打印 Office (Word/Excel/PowerPoint) 文档；或使用 WEB API，在应用程序中操作 Office (Word/Excel/PowerPoint) 及 PDF 文档，然后使用在线编辑查看结果文档。
本文将介绍如何快速实现您的服务器与应用程序对接，助您轻松高效使用 Spire.Cloud 在线编辑云端 Office。
接口调用配置
关键参数说明
"appid" 和 "appkey" 设置为空，以服务器 192.168.0.110 为例：
- http://192.168.0.110:8000 代表在线编辑
- http://192.168.0.110:3000 代表 Demo 示例
- http://192.168.0.110:8050 代表 WebAPI
- http://192.168.0.110:3000/files/192.168.0.112/default/cloud/test.docx
（http://192.168.0.110:3000/files/本地IP/default/文件夹/文件名）
注：文件夹 cloud 由 storage web api 创建，test.docx 文档是使用 word web api 创建的新文档
在 SDK 调用前需要进行配置，完整示例如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="icon" href="/favicon.ico" type="image/x-icon" /><title>
Spire.Office
</title>
<style>
html {
height: 100%;
width: 100%;
}
body {
background: #fff;
color: #333;
font-family: Arial, Tahoma,sans-serif;
font-size: 12px;
font-weight: normal;
height: 100%;
margin: 0;
overflow-y: hidden;
padding: 0;
text-decoration: none;
}
form {
height: 100%;
}
div {
margin: 0;
padding: 0;
}
</style>
<script language="javascript" type="text/javascript" src="http://192.168.0.110:8000/web/editors/api/documenteditor.js"></script>
<script type="text/javascript" language="javascript">
var docEditor;
var fileName = "";
var lang = "zh";
var fileType = "";
var token = null;
var appid = null;
var appkey = null;
var innerAlert = function (message) {
if (console && console.log)
console.log(message);
};
var onReady = function () {
innerAlert("Document editor ready");
};
var onDocumentStateChange = function (event) {
var title = document.title.replace(/\*$/g, "");
document.title = title + (event.data ? "*" : "");
};
var onRequestEditRights = function () {
location.href = location.href.replace(RegExp("action=view\&?", "i"), "");
};
var onError = function (event) {
if (event)
innerAlert(event.data);
};
var onOutdatedVersion = function (event) {
location.reload(true);
};
function ajax(options) {
options = options || {};
var method = (options.type || "GET").toUpperCase(),
url = options.url,
queryString = null;
if (!url)
return;
if (options.data) {
queryString = [];
for (var attr in options.data) {
queryString.push(attr + "=" + options.data[attr]);
}
queryString = queryString.join("&");
}
if (method === "GET" && queryString) {
url += "?" + queryString;
queryString = "";
}
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
if (method === "POST")
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(queryString);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var data = xhr.responseText;
if (options.dataType === "json")
data = JSON.parse(data);
options.success && options.success(data);
} else {
options.error && options.error(xhr.status);
}
}
}
}
var callbackfn = function (result) {
if (result && result.data) {
var data = result.data,
fileName = data[0],
url = data[1];
if (fileName.indexOf('=') > -1)
fileName = fileName.split('=')[1];
var host1 = location.hostname;
var host ='http://192.168.0.110:8000';
ajax({
url: 'http://' + host + '/webeditor.ashx?type=save',
type: 'post',
data: { 'filename': fileName, 'fileuri': url },
dataType: 'json',
async: false,
success: function (json) {
if (json.code == 200 || json.code == '200') {
alert('保存成功');
} else {
this.error(json, '保存失败');
}
},
error: function (json, msg) {
alert(msg);
}
});
}
};
var connectEditor = function () {
var type = 'desktop';
if (type == "desktop") {
var app = navigator.appVersion;
if (app.toLowerCase().indexOf('window') != -1) {
type = "desktop";
} else {
type = "mobile";
}
};
var urlString ="http://192.168.0.110:3000/files/192.168.0.112/default/cloud/test.docx";
var arrfn = urlString.split(".");
var strp= arrfn[arrfn.length - 1];
var documentTypeValue=null;
switch(strp){
case "xls":
case "xlsx":
case "xlsm":
case "xlt":
case "xltx":
case "xltm":
case "ods":
case "fods":
case "ots":
case "csv":
documentTypeValue="spreadsheet";
break;
case "pps":
case "ppsx":
case "ppsm":
case "ppt":
case "pptx":
case "pptm":
case "pot":
case "potx":
case "potm":
case "odp":
case "fodp":
case "otp":
documentTypeValue="presentation";
break;
default:
documentTypeValue="document";
break;
}
docEditor = new OfficeAPI.DocumentEditor("iframeEditor",
{
width: "100%",
height: "100%",
editorType: type,
isReadOnly: 'False',
documentType: documentTypeValue,
document: {
key: "",
title: fileName,
url: urlString,
fileType: fileType,
info: {
author: "Me",
created: "2019/11/22"
}
},
editorConfig: {
mode: 'True',
lang: lang,
callbackUrl: "",
user: {
id: "",
name: "e-iceblue",
token: token,
appid: appid,
appkey: appkey
},
customization: {
goback: {
url: ""
}
}
},
events: {
'onReady': onReady,
'onDocumentStateChange': onDocumentStateChange,
'onRequestEditRights': onRequestEditRights,
'onError': onError,
'onOutdatedVersion': onOutdatedVersion,
'onSave': callbackfn
}
}
);
};
if (window.addEventListener) {
window.addEventListener("load", connectEditor);
} else if (window.attachEvent) {
window.attachEvent("load", connectEditor);
}
</script>
</head>
<body>
<form name="form1" method="post" action="./docEditor.aspx?fileID=demo+(2).docx&lang=zh" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTkyMjc5MTU4M2RkBQQQBsVcOHQbzTlwYapiES2Trc9Z/U4CC+r9rluZubc=" />
</div>
<div>
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="C2EAC0DE" />
</div>
<div id="iframeEditor">
</div>
</form>
</body>
</html>
若还有任何疑问，请及时联系我们。
- 电话：028-81705109
- 技术支持QQ：2790765778