共计 1573 个字符,预计需要花费 4 分钟才能阅读完成。
文件关上流程
要在浏览器关上一个 office 文件,须要通过以下步骤
- 指定文件下载门路和文件类型 (word,ppt,excel) 并通过 JavascriptApi 调用 document server 相干接口
- document server 会在后盾将文件下载好并将文件转换为
Office Open XML
格局,这是一种基于 XML 的通用文档格局 - document server 会将文档转换为前端可展现的模式(canvas)
- 前端文档编辑器显示文档内容
实际
这里咱们筹备了一个样例文档并放到线上,这个样例文档也是 onlyoffice 官网应用的样例 word 文档。
创立页面
本地创立一个 html 页面,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onlyoffice 教程 </title>
</head>
<body>
<div id="placeholder"></div>
<script type="text/javascript" src="http://47.113.219.133:9001/web-apps/apps/api/documents/api.js"></script>
<script>
var docEditor = new DocsAPI.DocEditor("placeholder", {
"document": {
"fileType": "doc",
"permissions": {"edit": true,},
"key": "100000",
"title": "测试页面.docx",
"url": "https://zhengjianfeng.cn/document/example.docx",
},
"height": "800px",
"width": "100%"
});
</script>
</body>
</html>
<div id="placeholder"></div>
指定文档编辑器所在的区域http://47.113.219.133:9001/web-apps/apps/api/documents/api.js
是 documentserver 的 javascript api- document.fileType 必须指定文档类型
- key:能够为文档指定一个主键,后盾会依据这个主键做缓存,在施行时最好将文档编号作为 key
- url:文档门路,后盾会依据该门路进行下载转换
- height:指定文档编辑器高度
- width:指定文档编辑器宽度
如果一切顺利,你能够看到以下页面
汉化
编辑器默认语言是英文,官网是反对中文,能够批改代码减少中文反对
<script>
var docEditor = new DocsAPI.DocEditor("placeholder", {
...
"editorConfig":{"lang":"zh-CN"}
});
</script>
能够在 js 中配置 editorConfig 指定语言
用户信息
在文档关上时会弹出一个提示框(英文,无奈汉化)提醒咱们执行用户名,这是因为咱们没有指定打开文档的用户,onlyoffice 认为咱们是匿名者,须要指定名称
批改代码如下
<script>
var docEditor = new DocsAPI.DocEditor("placeholder", {
...
"editorConfig":{
"lang":"zh-CN",
"user":{
"group":"admin",
"id":"004",
"name":"郑剑峰"
}
}
});
</script>
这样在编辑器的右上角就能够显示以后用户信息,当然在生产中,这里须要做好权限管制,不然容易导致平安问题
其余配置
编辑器提供了十分丰盛的配置,大家能够自行参考官网文档
- 文档配置
- 文档信息配置
- 文档权限配置
- 编辑器配置
- 自定义配置
- 嵌入文档配置
- 插件配置
- 事件配置
- api
- 回调函数解决
正文完