WEB前端实现在线预览、编辑Office文档
这篇文章介绍如何在web前端引入JS插件实现在线预览、编辑Office文档。
使用插件：Spire.Cloud在线Office文档编辑器（官网：冰蓝科技在线编辑）
重点：该方案仅需浏览器支持HTML5，提供中英文双语界面，不需要安装Office或控件，也不需要做环境配置就可以直接调用插件，非常简单。
准备工作
首先，使用浏览器打开：https://cloud.e-iceblue.cn/，点击右上角头像注册/登录账号。
其次，点击菜单栏“我的应用”创建应用，获取APP ID和APP Key。
前端JavaScript代码实现
添加以下JavaScript代码到前端页面，来集成Spire.Cloud在线编辑器实现Office文档在线预览或编辑。参数对照表已放在文章末尾。
<!DOCTYPE html>
<html>
<head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="mobile-web-app-capable" content="yes" /><meta HTTP-EQUIV="pragma" CONTENT="no-cache"/><meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"/><meta HTTP-EQUIV="expires" CONTENT="0"><title>Spire.Cloud</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;
}
iframe {border: none !important;
}.form {height: 100%;
}div {margin: 0;padding: 0;
}</style>
</head>
<body>
<div class="form"><div id="iframeEditor"></div>
</div><script type="text/javascript" src="https://api.e-iceblue.cn/web/editors/spireapi/SpireCloudEditor.js"></script><script type="text/javascript" language="javascript">var docEditor;var appid = 'your app id';var appkey = 'your app key';var config = {"fileAttrs": {"fileInfo": {"name": "sample.docx","ext": "docx","primary": String(new Date().getTime()),//this is key"creator": "Jonn","createTime": "2022-04-18 11:30:43"},"sourceUrl": "https://cloud.e-iceblue.cn/demo/sample.docx","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": "","templates": {}},"user": {"id": "uid-1","name": "Jonn","canSave": true,"customization" : {"public": { "common": {"whiteLabel": false,"defaultZoom": 1,"openReviewChanges": false,"viewVersion": false,"tokenValue": "","permGroups": ["everyone"],"socket_url": "", "header": {"hideTitle": false,"defaultView": "full"},"goback": { "url" : "" }},"document": null, "excel":null,"powerpoint":null},"private": { "token": "", "appid": "","appkey": ""}}},"editorAttrs": {"editorMode": "edit","editorWidth": "100%","editorHeight": "100%","editorType": "document", "platform": "desktop", //desktop， mobile， embedded"viewLanguage": "zh", //en/zh"events": {}}
};var innerAlert = function (message) {if (console && console.log)console.log(message);};var onAppReady = function () {};var onDocumentStateChange = function (event) {var title = document.title.replace(/\*$/g, "");document.title = title + (event.data ? "*" : "");};var onRequestEditRights = function () {location.href = location.href.replace(RegExp("mode=view\&?", "i"), "");};var onRequestHistory = function (event) {var historyObj = null;docEditor.refreshHistory({currentVersion: "1",history: historyObj});};var onRequestHistoryData = function (data) {var version = data.data;var historyData = null;docEditor.setHistoryData(historyData[version-1]);};var onRequestHistoryClose = function (event){document.location.reload();};var onError = function (event) {if (event)innerAlert(event.data);};var onOutdatedVersion = function (event) {location.reload(true);};var onDownload = function(props){alert('fileName:'+props.data[0]+'fileUrl:'+props.data[1]);console.log('fileName:'+props.data[0]);console.log('fileUrl:'+props.data[1]);};var reloadFrame = function(){docEditor.reload();};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 () {config.editorAttrs.events = {"onReady": onAppReady,"onDocumentStateChange": onDocumentStateChange,'onRequestEditRights': onRequestEditRights,"onError": onError,"onRequestHistory": onRequestHistory,"onRequestHistoryData": onRequestHistoryData,"onRequestHistoryClose": onRequestHistoryClose,"onOutdatedVersion": onOutdatedVersion,'onSave': callbackfn};docEditor = new SpireCloudEditor.OpenApi('iframeEditor', config,appid,appkey);fixSize();};var onSaveClick = function () {docEditor.onSaveClick();}var fixSize = function () {var wrapEl = document.getElementsByClassName("form");if (wrapEl.length) {wrapEl[0].style.height = screen.availHeight + "px";window.scrollTo(0, -1);wrapEl[0].style.height = window.innerHeight + "px";}};if (window.addEventListener) {window.addEventListener("load", connectEditor);window.addEventListener("resize", fixSize);} else if (window.attachEvent) {window.attachEvent("onload", connectEditor);window.attachEvent("onresize", fixSize);}</script>
</body>
</html>
以上代码中的appid、appkey参数要更改为你自己的App ID和App Key，"sourceUrl": "https://cloud.e-iceblue.cn/demo/sample.docx"参数要改为你自己的文档地址，同时要确保路径存在并且有访问权限。
我这里只是介绍了简单的预览、编辑的前端实现代码，如果需要把文档保存到服务器，需要设置callBackUrl参数（回调URL），这块要配合后端代码去实现。
编辑Word文档效果图如下：
参数对照表：
| 配置参数 |
示例值解释 |
设置值 |
||
| 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时， |
||
| defaultZoom |
缩放 |
1 |
||
| OpenReviewChagnes |
是否显示跟踪变化 |
默认值为false,当设置为true时，显示更改痕迹 |
||
| viewVersion |
查看属性 |
默认值为false,当设置为true时，不允许保存. |
||
| permGroups |
限制编辑分组 |
全员 |
||
| socket_url |
URL |
可为空 |
||
| header | ||||
| hideTitle |
隐藏标题 |
默认值为false,当设置为true时，标题隐藏. |
||
| defaultView |
默认视图 |
全屏 |
||
| goback |
URL |
可为空 |
||
| editorAttrs | ||||
| editorMode |
编辑模式 |
不能为空，必须赋值为“edit” 或 “view” |
||
| editorWidth |
宽 |
可为空，默认值100%. |
||
| editorHeight |
高 |
可为空，默认值100%. |
||
| editorType |
文件编辑器类型 |
可不配置，程序根据文件类型获取，必须设置为 document 或 spreadsheet 或 presentation |
||
| platform |
编辑器平台类型 |
不能为空，必须设置为 desktop 或 mobile 或 embedded 中的一种 |
||
| viewLanguage |
平台界面展示语言 |
可为空。“en” 或 “zh”. 若设置为空，则匹配浏览器默认语言 |
||
| canChat |
是否可聊天 |
默认值为true,当设置为false时，不可聊天. |
||
| canComment |
是否可批注 |
默认值为true,当设置为false时，不可批注 |
||
| events |
事件 |
"onReady", //编辑器已加载完成 |
||
WEB前端实现在线预览、编辑Office文档相关推荐
- 利用微软的Office Online在线预览播放Office文档，无工具栏
利用微软的Office Online在线预览播放Office文档 通过微软的在线预览URL链接可以直接打开在线PPT文档如下 https://view.officeapps.live.com/op/v ...
- 在线预览doc,docx文档
在线预览doc,docx文档 前言:上传成功以后的每个文档都能获取到所传文件的路径; 我这里是一个maven项目,需要在pom文件引入 <!-- 文件预览 --><dependenc ...
- wps在线预览接口_文档在线预览的实现
最近在研究企业文档管理,这个是基本上所有企业都需要的软件,当然也是有很多种解决方案.对于企业文档来说,最基本的需求就是独立存储,共享.这种需求只需要建立一个Windows共享文件夹或者架一个Samba ...
- 文档预览：在浏览器中预览查看 Office 文档
您的网站或博客上是否有希望读者查看的 Office 文档,即使他们没有安装 Office?您愿意在下载之前查看文档吗?要为您的观众提供更好的体验,请尝试使用 Office Web 查看器. 什么是 O ...
- wps在线预览接口_WPS文档在线预览接入的一点心得
花了大半天时间接入WPS文档在线预览功能,还算比较顺利. 原来的OA系统一直用到文档在线预览功能,之前是用微软+officeweb365来实现的.一直感觉不太理想.昨天无意间见到金山WPS开放了在线文 ...
- python爬虫读取pdf_python爬虫处理在线预览的pdf文档
引言 最近在爬一个网站,然后爬到详情页的时候发现,目标内容是用pdf在线预览的 比如如下网站: https://camelot-py.readthedocs.io/en/master/_static/ ...
- java图片的在线预览_【Java】web实现图片在线预览
一.场景还原 用户上传了一张图片,已有服务器保存路径,现由于系统配置无法直接通过图片URL打开预览图片,需实现点击预览将图片显示在浏览器上. 二.实现方法 html: 预览 此处用预览按钮方法实现 J ...
- 前端页面预览word_前端实现在线预览文档
前端实现在线预览文档 发布时间:2019-06-03 17:22, 浏览次数:529 <>前端实现在线预览文档 最近项目开发中需要实现在线预览Word,Excel,PowerPoint格式 ...
- 前端实现在线预览文档
前端实现在线预览文档 最近项目开发中需要实现在线预览Word,Excel,PowerPoint格式的文档,网上查找了很多资源,各说纷纭,但是在一一尝试之后只有使用微软的预览接口才能成功,其他的会出现各 ...
最新文章
- 华为存储iscsi配置_iscsi 华为存储配置 上课内容
- VMWare虚拟机连接方式
- Apache访问日志切割
- linux 查找目录或文件
- Nginx +uwsgi+django配置
- 随机产生长度为20的字符串（数字和大小写字母）
- mysql约束sex_MySQL笔记--约束
- LiveVideoStack线上分享第五季（十二）：移动端多种通话场景统一技术方案实践...
- （十二）linux内核定时器
- html访问java接口出现缓存_高可用架构设计(3) -电商商品详情页缓存背景及框架说明...
- 【Windows】线程漫谈——线程同步之信号量和互斥量
- js正则匹配小数点后2位_正则实践与详解
- 元件原理图旋转45度_你能看懂电气原理图有多少？建议收藏共同学习
- CRT设置LOG日志功能
- [TimLinux] Python3 Coverity zeep/SOAP 库使用示例
- 面试常见的功能测试考试题关于测试方法的
- 基于JMF录制和播放视频源码
- 极客日报：库克对话何同学：苹果很多功能来自中国消费者反馈；高通、微软、谷歌联合施压监管方：反对NVIDIA收购ARM...
- 线性筛(Linear Sieve)
- 刷题笔记之十 (小易的升级之路+找出字符串中第一个只出现一次的字符+洗牌+MP3光标位置)