使用Onlyoffice 实现web版的Word,Excel 协同办公套件

张云飞Vir

发布于 2023-05-02 16:45:38

2.8K0

发布于 2023-05-02 16:45:38

文章被收录于专栏：写代码和思考

一、写在前面

像在线文档工具市场上很很多了，比如腾讯文档，石墨文档等。都已经提供了像word,exce,powerpoint 这样的功能，这些文档工具很优秀，使用起来非常的方便，但在中小规模的公司项目集成上使用就不是那么合适了，这时基于开源文档工具的定制化集成的方式可作为一个选择。OnlyOffice 就这样的一个优秀的文档服务平台。

ONLYOFFICE Docs 是一个开源办公套件，包括文本文档、电子表格、演示文稿和可填写表格的编辑器。

它提供以下功能：

创建、编辑和查看文本文档、电子表格、演示文稿和可填写的表格；
与其他团队成员实时协作处理文件。

ONLYOFFICE Docs 还支持用于将您的应用程序与onlyoffice集成的**WOPI 协议。

数据交互流程 和你的项目集成后是这样的结构：

(1)打开一个文档(携带URL地址）
      ↓
      ↓
web浏览器(js实现的word编辑器)   → → → (2) → → →  发送 文档URL 到 onlyoffice文档服务
 ↓        ↑       ↓      ↑  ←  ← ← ← (3) ← ← ←  onlyoffice服务(拉取文档解析成Open XML 格式) 
 ↓        ↑       ↓
 ↓        ↑       ↓ 
 ↓ → (4) →↑       ↓
                  ↓ → →（5）你的java应用(保存时会将文件流传过来)
                                 ↓
                                 ↓ → →（6）保存文档
说明：
* (1) 要打开一个文档时，携带这个 word 文档的url地址。
* (2)拉取并展示文档：web页面的js编辑器 将url发给 onlyoffice服务。
* (3) onlyoffice文档服务 拉取 word 文档，将文档转换为 Office Open XML 格式,返回给 js编辑器。
* (4) 用户在 web页面的js编辑器 修改编辑这个文档
* (5) 修改完毕后，保存。保存后的文档 被 onlyoffice 文档服务 通过url 接口回调的方式传递给 你的java应用
* (6) 你的java应用负责保存这个文件。

建议的web集成方式 --将编辑器的前端HTML和你的前端工程分离

将编辑器的前端HTML和你的前端工程分离,好处是避免过度耦合和互相隔离，在处理权限控制上也更方便。
使用java编写一个 spring MVC 项目，不仅负责返回一个 web 页面，也负责一些文档存储的回调等接口。
你的前端项目调用java，获得一个 html页面，作为 iframe 集成到前端工程中。
文档保存时，回调你的JAVA项目，负责保存文档。

二、使用 onlyoffice 集成

2.1 快速开始

由两部分组成：

使用 docker 启动一个文档服务
在html页面集成一个js 实现的编辑器。

先使用 docker 启动一个文档服务，方法见本文后面部分。这里先说下前端集成：

(1) 引入 js 依赖

<!-- 下面的 http://10.0.0.102:8090 指向你用docker部署的文档服务地址  -->
<script type="text/javascript" src="http://10.0.0.102:8090/web-apps/apps/api/documents/api.js"></script>

(2) 编写一个HTML页面，在嵌入编辑器的目标 HTML 文件中需要有一个占位符div标签

<div id="placeholder"></div>

(3) 初始化一个编辑器即可。

  <!-- 下面的 url 是 word 文件地址  -->
    <script type="text/javascript" >
      new DocsAPI.DocEditor("placeholder", {
          "document": {
              "fileType": "docx",
              "key": "USORxWbTQR83opgc0cyrnri2JJ7avClC",
              "title": "Example Document Title.docx",
              "url": "http://10.0.0.14:3000/ddd.docx"
          },
          "documentType": "word"
      });
    </script>

这样就实现了你的 web 版的word编辑器，非常的简单方便。

2.2 启动一个onlyoffice文档服务

这里使用 docker 启动它。

# 先创建文件夹
mkdir -p /var/log/onlyoffice
mkdir -p /var/www/onlyoffice/Data
mkdir -p /var/lib/onlyoffice
mkdir -p /var/lib/postgresql

# 使用 docker 搭建，注意 -e JWT_ENABLED=false 关闭了token检验
docker run --restart=always --name onlyoffice \
    -p 8090:80 \
    -e JWT_ENABLED=false \
    -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