Spire.Cloud 私有化部署完成后，可以在本地服务器上使用 Spire.Cloud 在线编辑服务在线创建、编辑、保存和打印 Office (Word/Excel/PowerPoint) 文档；或使用 WEB API，在应用程序中操作 Office (Word/Excel/PowerPoint) 及 PDF 文档，然后使用在线编辑查看结果文档。
本文将介绍如何快速实现您的服务器与应用程序对接，助您轻松高效使用 Spire.Cloud 在线编辑云端 Office。
接口调用配置
"appid" 和 "appkey" 设置为空，以服务器 192.168.0.48 为例：
- http://192.168.0.48:8000 代表在线编辑
- http://192.168.0.48:3000 代表 Demo 示例
- http://192.168.0.48:8050 代表 WebAPI
- http://192.168.0.48:3000/files/192.168.0.114/sample.docx
（http://192.168.0.48:3000/files/本地 IP/文件名）
注：文件夹 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.48:8000/web/editors/spireapi/SpireCloudEditor.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.48: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.48:3000/files/__ffff_192.168.0.114/sample.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 SpireCloudEditor.OpenApi("iframeEditor",
{
fileAttrs: {
fileInfo: {
name: '',
ext: '',
primary: '',
creator: '',
createTime: new Date('20210505')
},
sourceUrl: urlString,
createUrl: '',
callbackUrl: '',////This item can be empty, but only if the 'onSave' callback function must be defined in events. If the callback function is undefined and this item is empty, Cloud Editor will not provide save function.
verification: null,//用户文件系统下载文件时若需要验证类似token的数据可以写在这里
canEdit: true,
canDownload: false,
canForcesave: false
},
user: {
primary: '',
name: '',
canSave: true,
customization: {
public: {
common: {
whiteLabel: false,
defaultZoom: 1,
openReviewChanges: false,
permGroups: ['everyone'],//限制编辑分组
viewVersion: false,
header: {
hideTitle: false,
defaultView: 'full'
}
},
word: null,//doc定制
powerpoint: null,//ppt定制
excel: null//xls定制
}
}
},
editorAttrs: {//编辑器配置
editorWidth: '100%',
editorHeight: '100%',
editorType: 'document',//编辑器类型，可不配置，程序根据文件类型获取，结果为 document,presentation,spreadsheet
platform: 'desktop',//编辑器平台类型，可选desktop， mobile， embedded
viewLanguage: 'en',//平台界面展示语言可选en/zh
canChat: true,//是否可聊天
canComment: true,//是否可批注
canReview: true,
embedded: {
saveUrl: '',
embedUrl: '',
shareUrl: ''
},
events: {
'onReady': onReady,
'onDocumentStateChange': onDocumentStateChange,
'onError': onError,
'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>关键参数说明
| 配置参数 | 示例值解释 | 设置值 |
| fileAttrs | ||
| fileInfo |
文档信息 |
|
| name |
文档名称 |
可为空 |
| ext |
文档后缀 |
docx, xlsx, pptx |
| primary |
This is the key |
可为空 |
| creator |
作者 |
可为空 |
| createTime |
创建时间 |
可为空 |
| sourceUrl |
URL |
不能为空，且需有访问权限 |
| createUrl |
URL |
可为空 |
| callbackUrl |
回调 URL |
可为空，若需使用在线编辑的保存功能，则必须定义回调URL |
| verification |
验证信息 |
可为空。用户文件系统下载文件时若需要验证类似 token 的数据可以写在这里 |
| templates |
文档模板 |
可为空 |
| user |
用户 |
不能为空 |
| Id/name |
冰蓝云上的 ID 和名字 |
可为空 |
| canSave |
保存属性 |
默认值为 true，当设置为 false 时，不允许保存 |
| customization |
自定义选项 |
docx |
| public | ||
| common | ||
| whiteLabel |
白标 |
默认值为 false，当设置为 true 时， 不显示 E-iceblue Logo 图标 |
| defaultZoom |
缩放 |
1 |
| OpenReviewChagnes |
是否显示跟踪变化 |
默认值为 false，当设置为 true 时，显示更改痕迹 |
| viewVersion |
查看属性 |
默认值为false,当设置为true时，不允许保存. |
| permGroups |
限制编辑分组 |
全员 |
| socket_url |
URL |
可为空 |
| header | ||
| hideTitle |
隐藏标题 |
默认值为 false，当设置为 true 时，标题隐藏 |
| defaultView |
默认视图 |
全屏 |
| goback |
URL |
可为空 |
| editorAttrs | ||
| editorMode |
编辑模式 'edit'（编辑） 'view'（展示） |
不能为空，必须赋值为 "edit" 或"view" |
| editorWidth |
宽 |
可为空，默认值100% |
| editorHeight |
高 |
可为空，默认值100%. |
| editorType |
文件编辑器类型 |
可不配置，程序根据文件类型获取，必须设置为 document 或 spreadsheet 或 presentation |
| platform |
编辑器平台类型 'desktop'（电脑端展示） 'mobile'（手机端展示） 'embedded'（嵌入展示） |
不能为空，必须设置为 desktop 或 mobile 或 embedded 中的一种 |
| viewLanguage |
平台界面展示语言 |
可为空，"en" 或 "zh"，若设置为空，则匹配浏览器默认语言 |
| canChat |
是否可聊天 |
默认值为 true，当设置为 false 时，不可聊天 |
| canComment |
是否可批注 |
默认值为 true，当设置为 false 时，不可批注 |
| events |
事件 |
"onStart", //编辑器已加载完成 "onDocumentStateChange", //当前文档状态（已保存或未保存） "onError", //报错（返回报错信息） "onSave" //保存（返回保存事件） |
若还有任何疑问，请及时联系我们。
- 电话：028-81705109
- 技术支持QQ：2790765778