翻译|使用教程|编辑:李显亮|2020-07-29 11:05:22.963|阅读 187 次
概述:本文将介绍如何快速实现您的服务器与应用程序对接,助您轻松高效使用 Spire.Cloud 在线编辑云端 Office。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
你在寻找一款既能在线编辑office文件,又能实现与web应用程序对接的软件吗?好巧,冰蓝公司最新推出Spire.Cloud,搭载了基于云端的Office在线编辑器和WEB API开发接口,既能安全稳定地实现WEB网页端在线查看、编辑Office文档;又能在服务器端通过代码调用接口简单高效地实现读写Office文档内容。
Spire.Cloud提供了四种语言的SDK(包括.NET、Java、python、PHP),你可以点击下载Spire.Cloud Web SDK。
Spire.Cloud 私有化部署完成后,可以在本地服务器上使用 Spire.Cloud 在线编辑服务在线创建、编辑、保存和打印 Office (Word/Excel/PowerPoint) 文档;或使用 WEB API,在应用程序中操作 Office (Word/Excel/PowerPoint) 及 PDF 文档,然后使用在线编辑查看结果文档。
本文将介绍如何快速实现您的服务器与应用程序对接,助您轻松高效使用 Spire.Cloud 在线编辑云端 Office。
接口调用配置关键参数说明:
"appid" 和 "appkey" 设置为空,以服务器 192.168.0.110 为例:
注:文件夹 cloud 由 storage web api 创建,test.docx 文档是使用 word web api 创建的新文档
在 SDK 调用前需要进行配置,完整示例如下:
<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="//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 ='//192.168.0.110:8000'; ajax({ url: '//' + 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 ="//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>
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn