如何使用 ONLY OFFICE 在你的 WEB 中集成 OFFICE 文档编辑功能

前言

在日常 WEB 开发过程中常常有附件管理的需求，而这些附件大部分是 OFFICE 文件，而对于这些办公文档，用户需要下载下来编辑，编辑完成后上传，而对于用户的改动，开发者还需要实现历史版本管理功能。若能够实现 Office 文档在线编辑功能，这将大大提高用户的协作效率，而这个功能对于普通开发者来说非常困难的，今天我将介绍一款开源的办公套件 ONLYOFFICE，它可以帮你在 WEB 中轻松集成 OFFICE 文档编辑功能。

ONLY OFFICE 介绍

ONLYOFFICE 是一个免费开源的协作办公套件，适用于 Windows、Linux 和 macOS。该套件包括 3 个主要微软 Office 的替代品（Word、Excel、PowerPoint）。也提供表单（Forms）生成器，PDF 查看器和文件转换器。

对于个人用户，我们完全可以使用 ONLYOFFICE 代替 Microsoft Office，它与 Microsoft Office 高度兼容，并且免费无广告，你可以在 ONLYOFFICE 官网上下载桌面版本或者手机版本。

ONLYOFFICE 除了能够代替 Microsoft Office，还拥有云端存储，多人实时编辑共享的功能。

在侧边底部，选择链接到云，通过简单的注册，就可以实现文档云端同步

在这个 Tab 下新建的文档便会自动保存到云，只要登录相同的账号，我们就可以在多个设备之间共享文档。

云端的文档还可以协同编辑，我们只需要点击右上角的共享，添加一个链接，将这个链接发送给你的同事，你们就可以协同编辑。

协同者只需要浏览器，就可以编辑，我们再也不用为了软件版本不兼容而烦恼，这大大提高了文档协同编辑的效率。

能够使用浏览器编辑，这一功能这得益于 ONLY OFFICE 是使用 HTML5 的 canvas 和 JavaScript 实现的。

ONLY OFFICE 实现原理

想要在你的 web 中集成 ONLYOFFICE，我们得先要知道它的原理，下图来自于 ONLYOFFICE 官方文档

1. 用户使用浏览器访问打开文档进行查看或者编辑；
2. 通过 url 上的 fileName 参数，使用 JavaScript API 将文档唯一标识符（key）以及文档发送到文档编辑器（editor）。
3. 文档编辑器（editor）向文档编辑服务（server）发送一个打开文档的请求。
4. 文档编辑服务从文档存储服务（document storage service）下载相对应的文档，并将文档转换为 Office Open XML 格式。
5. 准备就绪后，文档编辑服务（server）会将转化后的文档传输到基于浏览器的文档编辑器（editor）。
6. 文档编辑器提供编辑或者查看权限，对文档进行相应操作，执行保存。

因此实现这一功能需要有 2 部分组成

• 文档编辑器（document editor）
• 文档服务器（document server）

前端实现

对于前端来说实现很简单，只需要在 html 设置一个容器，并且引入文档编辑器的 api

<div id="placeholder"></div>
<script
  type="text/javascript"
  src="https://documentserver/web-apps/apps/api/documents/api.js"
></script>

其中documentserver 是安装了 ONLYOFFICE Document server 的服务器的名称。

new DocsAPI.DocEditor('placeholder', {
  document: {
    fileType: 'docx',
    key: 'Khirz6zTPdfd7',
    title: 'Example Document Title.docx',
    url: 'https://example.com/url-to-example-document.docx',
  },
  documentType: 'word',
})

JavaScript 部分只需要通过 DocsAPI new 一个 DocEditor 即可。

其中 example.com 是安装文档管理器和文档存储服务的服务器的名称。

安装 OnlyOffice

因此关键部分还是在 server 部分，为此我们要准备一台服务器, 我这里选择使用 CentOS、2 核 2GB 的服务器，其他 Linux 版本的安装，大家可以参考官网

安装方式我选择使用 Docker

前置条件：服务器可连接外网

安装 Docker

安装 Docker 我选择使用阿里云镜像安装，登录服务器后，在命令行中输入以下命令

curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

等待几分钟后就可以安装成功。

我们可以使用 docker -v, 查看 docker 的版本

安装 OnlyOffice 社区版

在命令行中输入以下命令

sudo docker run -i -t -d -p 80:80 --restart=always onlyoffice/documentserver

• -p 80:80 表示端口映射，前者是宿主机端口，后者是容器内的映射端口。

• --restart=always 容器自动重启

• onlyoffice/documentserver 镜像名称

官方还建议将数据存放在 Docker 容器之外，因为这样可以新版本发布后，轻松更新 ONLYOFFICE Docs 而不会造成丢失数据。

因此需要使用下面命令

sudo docker run -i -t -d -p 80:80 --restart=always \
    -v /app/onlyoffice/DocumentServer/logs:/var/log/onlyoffice  \
    -v /app/onlyoffice/DocumentServer/data:/var/www/onlyoffice/Data  \
    -v /app/onlyoffice/DocumentServer/lib:/var/lib/onlyoffice \
    -v /app/onlyoffice/DocumentServer/db:/var/lib/postgresql  onlyoffice/documentserver

数据卷说明

• /var/log/onlyoffice 对于 ONLYOFFICE 文档日志
• /var/www/onlyoffice/Data 证书
• /var/lib/onlyoffice 用于文件缓存
• /var/lib/postgresql 对于数据库

首次执行，镜像需要下载，需要等待几分钟。

安装成功后可以使用 docker ps 查看运行状态

接下来我们， 就可以使用 ip 访问 onlyoffice 的服务页面了。

onlyoffice 很贴心地在欢迎页面上添加了 example 测试示例，按页面上的命令执行，启动测试示例，点击Go To Example, 就可以访问文档编辑器示例了

点击左侧，便可以创建在线 Word、Excel、PowerPoint 等

在 Nodejs 中集成

接下来，我们需要在自己的程序中集成 onlyoffice。

ONLYOFFICE Docs 旨在无缝适配您的网络应用程序，无论您的应用程序是用什么语言编写的，ONLYOFFICE 为流行的前端框架提供了在线编辑器集成和示例

我们可以在API 官网下载 Nodejs Example

下载完成完成后, 进入程序目录，并且安装 npm 包

cd  Node.js Example
yarn install

接下来我们需要修改文档服务器地址 config/default.json

"storageFolder": "./files"
"storagePath": "/files"
"siteUrl": "https://documentserver/"

documentserver 就是刚刚安装的 IP 地址。 storageFolder 和 storagePath 我们可以根据实际修改。

运行程序

yarn satrt

然后我们使用浏览器访问 http://localhost:3000

进入后的界面同 Docker Example 一致，但是我们创建一个新的文档，界面会提示以下错误。

The document security token is not correctly formed.

原因是从 7.2 版本开始， JWT 验证默认开启

如果在安装期间未添加自定义密钥，则会自动生成随机密钥。

我们可以根据文档服务器欢迎页面上的提示，执行查看秘钥。

获得的秘钥修改到 config/default.json 中。

修复完成后，我们再次创建文档，访问http://localhost:3000/editor?fileName=new.docx

此时页面会有以下错误提示Download failed.

原因是，我们的 document server 安装在 docker 中。对于 docker 服务来说， localhost:3000 是不存在这个文件的。

因此我们需要通过本机 IP 访问。 真实生产环境上，我们会分配一个域名。使用 IP 或者域名访问就可以成功了。最后附上一张成功的截图。

小结

本文我们没有介绍 Nodejs 文件读写的实现，其大部分代码都在 app.js 中，而是主要介绍了 ONLYOFFICE 部署和对接过程。

1. 使用开源软件 ONLYOFFICE 代替 Microsoft Office
2. 使用 docker 部署了 ONLYOFFICE 社区版 Document Server
3. 使用官方的 Nodejs Demo 对接 Document Server

当然本文只是对 ONLYOFFICE 做了一个简单的介绍，更多功能请大家参考 ONLYOFFICE 官网

以上就是本文全部内容，如果对你有帮助，可以随手点个赞，这对我真的很重要，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。