快速接入

本文展示了如何从零开始,调用冰蓝云端 Office 文档处理软件服务端 SDK ,实现在线编辑 Office(Word, Excel 和 PowerPoint)及 PDF 文档,完成与您的应用程序对接部分,助您轻松实现高效率、无纸化办公。


下载服务端 Demo 示例

为了帮助开发者方便调用开放接口,我们提供了云端 Office 文档处理软件 Demo 示例,包含 .NET、 JAVA、PHP 和 NodeJS 四种,封装了 Word, Excel, PowerPoint 及 PDF 等文档操作的主要功能。请先下载对应语言版本的 示例 详细了解产品功能。

如果您想直接运行 demo,请先访问 https://cloud.e-iceblue.cn 并注册账号,通过创建应用程序,获得 App ID 和 App key,并将文档 Url 设置为可以访问的域名或服务器公网 IP。若您使用在线编辑的保存功能,则需定义 callBackUrl 进行文档保存。


接口调用配置

在 SDK 调用前需要进行配置,设置如下:

<script language="javascript" type="text/javascript" src="https://api.e-iceblue.cn/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 = 'your app id';
        var appkey = 'your app key';

        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 ='';
                ajax({
                    url: '',
                    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 ="https://cloud.e-iceblue.cn/demo/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()
								},
								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: true,
								canForcesave: true
							},
							user: {
								primary: '',
								name: '',
								canSave: false,
								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: 'zh',//平台界面展示语言可选en/zh
								canChat: true,//是否可聊天
								canComment: true,//是否可批注
								canReview: true,
								embedded: {
									saveUrl: '',
									embedUrl: '',
									shareUrl: ''
								},
								events: {
								'onReady': onReady,
								'onDocumentStateChange': onDocumentStateChange,
								'onError': onError,
								'onSave': callbackfn
								}
							}
                },
				appid,
				appkey
            );
        };
        if (window.addEventListener) {
            window.addEventListener("load", connectEditor);
        } else if (window.attachEvent) {
            window.attachEvent("load", connectEditor);
        }

    </script>

HTML示例下载link: https://cloud.e-iceblue.cn/demo/Sample.zip


关键参数说明

配置参数
示例值解释
设置值
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 和名字
可为空
Appid/appkey
Token 和 AppID/APPkey
二者必有一项不能为空
冰蓝云网站注册账号获取该信息
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" //保存(返回保存事件)

若还有任何疑问,请及时联系我们。