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

4次阅读

共计 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>

这样在编辑器的右上角就能够显示以后用户信息，当然在生产中，这里须要做好权限管制，不然容易导致平安问题

编辑器提供了十分丰盛的配置，大家能够自行参考官网文档