文件关上流程

要在浏览器关上一个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
  • 回调函数解决