onlyoffice教程0x03-打开文件

12月

onlyoffice教程0x03-打开文件

wls1036 技术 2021-12-23

文件打开流程

要在浏览器打开一个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>

指定文档编辑器所在的区域
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>

这样在编辑器的右上角就可以显示当前用户信息，当然在生产中，这里需要做好权限控制，不然容易导致安全问题