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

2023-05-02 16:45:38 浏览数 (2)

一、写在前面

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

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

它提供以下功能:

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

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

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

代码语言:javascript复制
(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 依赖

代码语言:javascript复制
<!-- 下面的 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标签

代码语言:javascript复制
<div id="placeholder"></div>

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

代码语言:javascript复制
  <!-- 下面的 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 启动它。

代码语言:javascript复制
# 先创建文件夹
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

三、扩展

3.1 使用Java集成

官网有个 Java Spring Example 的官方示例。带web页面,可 展示文档列表页面,和被 回调保存文件。

0 人点赞