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 onStart = 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: {
'onStart': onStart,
'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 | 文档唯一标示符 | 可为空 | |||||
| creator | 文档创建者 | 可为空 | |||||
| createTime | 文档创建时间 | 可为空 | |||||
| sourceUrl | 文档 URL | 不能为空，且需有访问权限 | |||||
| createUrl | 创建新文档时模板文档的 Url | 可为空 | |||||
| callbackUrl | 回调 URL | 可为空，若需使用在线编辑的保存功能，则必须定义回调 URL 或回调事件 | |||||
| verification | 验证信息 | 可为空。用户文件系统下载文件时若需要验证类似 token 的数据可以写在这里 | |||||
| templates | 文档模板 | 可为空 | |||||
| canEdit | 文档是否可编辑 | 默认值为 true，当设 false 时，不允许保存. | |||||
| canDownload | 文档是否可编辑 | 默认值为 true，当设 false 时，不允许下载 | |||||
| user | 用户配置对象 | ||||||
| primary | 用户 ID | 可为空 | |||||
| name | 用户名 | 可为空 | |||||
| canSave | 该用户是否可以保存文档 | 默认值为 true，当设 false 时，不允许保存 | |||||
| canSaveByShortcut | 该用户是否可以通过快捷键保存文档 | 默认值为 true，当设 false 时，不允许通过快捷键保存 | |||||
| customization | 自定义参数对象 | ||||||
| public | 公用的参数 | ||||||
| common | 通用参数对象 | ||||||
| whiteLabel | 白标 | 默认值为 false，当设 true 时，不显示 E-iceblue Logo 图标 | |||||
| defaultZoom | 缩放值 | 可为空，设置范围为 0.5-5 | |||||
| OpenReviewChagnes | 是否打开修订 | 默认值为 false，当设 true 时，打开修订 | |||||
| openNavigation | 打开导航栏 | 默认值为 false，当设 true 时，显示导航栏 | |||||
| openAllComments | 打开批注列表 | 默认值为 false，当设 true 时，显示批注列表 | |||||
| CollaborationModeIsFast | 设置编辑模式 | 协同编辑模式是否为快速，值为 true 时模式为快速，值为 false 是模式为严格，不设置此参数时从编辑器缓存中获取上一次的值，缓存中没有时设为快速 | |||||
| CollaborationModeOnlyFast | 禁用严格模式 | 模式是否仅为快速，默认为 false，值为 true 设为快速且禁用严格模式 | |||||
| viewVersion | 查看模式 | 默认值为 false，当设 true 时，不允许保存. | |||||
| canDownloadInView | 是否可以在查看模式中下载 | 默认值为 false，当设 true 时，可以在查看模式中下载. | |||||
| canPrintInView | 是否可以在查看模式中打印 | 默认值为 false，当设 true 时，可以在查看模式中打印. | |||||
| openReviewPanel | 打开修订列表 | 默认值为 false，当设 true 时，显示修订列表 | |||||
| hideRuler | 隐藏标尺 | 默认从浏览器缓存中获取值，当值为 true 时，隐藏标尺，值为 false 时，显示标尺 | |||||
| hideStatusBar | 隐藏状态栏 | 默认值为 false，当设 true 时，隐藏状态栏 | |||||
| showBookmarks | 显示书签标识 | 默认值为 true，当设 false 时，隐藏书签标识 | |||||
| keepTextOnly | 粘贴时默认只粘贴文本 | 默认值为 false，当设 true 时，粘贴时只粘贴文本 | |||||
| permGroups | 当前用户所属分组，该对象是一个数组 | 默认为全员，可输入自定义分组 | |||||
| socket_url | 自定义 socket_url，主要为解决私有部署后使用 Nginx 做反向代理后，域名监听端口与暴露端口不配的问题 | 可为空 | |||||
| header | |||||||
| hideTitle | 隐藏标题 | 默认值为 false，当设 true 时，标题隐藏. | |||||
| defToolbar | 工具栏视图 | 默认值为 "full"，可设置值为 "full" 或 "short" | |||||
| goback | 回退对象 | ||||||
| url | 回退 url | 可为空 | |||||
| btnPermissions | 按钮权限控制 | 查看按钮权限控制表 | |||||
| previewShowCursor | 预览模式下显示光标 | 默认为 true，当值为 false 时，隐藏光标 | |||||
| showCursor | 显示光标 | 默认为 true，当值为 false 时，隐藏光标 | |||||
| cusWaterMarkJs | 引入客户水印 Js | 应为一个 url 地址 | |||||
| canChangeProduct | 是否可以切换产品 | 默认为 false，当设 true 时，可以切换 | |||||
| showTableline | 无边框表格是否显示虚线 | 默认为 true，当值为 false 时，隐藏虚线 | |||||
| document | Word 定制 | 查看对应客户的定制说明文档 | |||||
| excel | Excel 定制 | 查看对应客户的定制说明文档 | |||||
| powerpoint | PPT 定制 | 查看对应客户的定制说明文档 | |||||
| aiCommon | 使用 AI 功能需要配置的公有云 id，key，TokenUrl | 查看对应 AI 的配置文档 | |||||
| aiAttars_WordAI | 使用 Word 的 AI 功能需要配置的 appkey 和 productType | 查看对应 AI 的配置文档 | |||||
| aiAttars_ExcelAI | 使用 Excel 的 AI 功能需要配置的 appkey 和 productType | 查看对应 AI 的配置文档 | |||||
| aiAttars_PowerPointAI | 使用 PPT 的 AI 功能需要配置的 appkey 和 productType | 查看对应 AI 的配置文档 | |||||
| editorAttrs | 编辑器配置对象 | ||||||
| editorMode | 编辑模式 可填 'edit'（编辑），'view'（展示） |
可为空，默认为'edit' | |||||
| editorWidth | 宽 | 可为空，默认值100%. | |||||
| editorHeight | 高 | 可为空，默认值100%. | |||||
| editorType | 文件编辑器类型 | 可不配置，程序根据文件类型获取，必须设置为 document 或 spreadsheet 或 presentation | |||||
| platform | 编辑器平台类型 'desktop'（电脑端展示），'mobile'（手机端展示），'embedded'（嵌入展示） |
不能为空，必须设 desktop 或 mobile 或 embedded 中的一种 | |||||
| viewLanguage | 平台界面展示语言 | 可为空，"en" 或 "zh" 若设置为空，则匹配浏览器默认语言 | |||||
| canChat | 是否可聊天 | 默认值为 true，当设置为 false 时，不可聊天. | |||||
| canComment | 是否可批注 | 默认值为 true，当设置为 false 时，不可批注 | |||||
| canReview | 是否可以修订 | 默认值为 true，当设置为 false 时，不可修订 | |||||
| canForcesave | 文档是否可强制保存 | 默认值为 true ，当设 false 时，不允许强制保存 | |||||
| unMarked | 开启无标记模式，接受修订 | 可为空，默认值为 false，当设置为 true 时，开启无标记模式，就表示接受修订 | |||||
| canSignature | 是否开启签名签章功能 | 可为空，默认值为false，当设置为true时，打开签名签章功能 | |||||
| canWordAI | 是否开启 Word 的 AI 功能 | 可为空，默认值为 false，当设置为 true 时，开启 Word 的 AI 功能 | |||||
| canExcelAI | 是否开启 Excel 的 AI 功能 | 可为空，默认值为 false，当设置为 true 时，开启 Excel 的 AI 功能 | |||||
| canPowerPointAI | 是否开启 PPT 的 AI 功能 | 可为空，默认值为 false，当设置为 true 时，开启 PPT 的 AI 功能 | |||||
| events | 事件 | ||||||
| onStart | 编辑器初始化完成，开始加载解析文档时触发该事件 | ||||||
| onDocumentContentReady | 文档加载完成时触发该事件 | ||||||
| onSave | 保存时触发该事件 | ||||||
| onDocumentStateChange | 文档状态改变时触发该事件，文档有已保存和未保存两种状态 | ||||||
| onError | 报错时触发该事件 | ||||||
| onErrorCallback | 报错点击弹框的回调事件 | 通常情况下，报错时点击弹框页面会跳转至 fileAttrs.customization.public.common.goback.url 所值的页面，但如果用户自定义了该函数，则调用该函数，url 自动失效 | |||||
若还有任何疑问，请及时联系我们。
- 电话：028-81705109
- 技术支持QQ：2790765778