乐趣区

关于office:onlyoffice教程0x03打开文件

文件关上流程

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