如何构建基于 Onlyoffice 的私有云 Office 办公体验

缘起于进行了一次在线 Office 解决方案的调研，对比了 Office365、可道云、WPS Office、PageOffice 等厂商，最终敲定了使用 Onlyoffice，故整理了一份 Onlyoffice 从零开始系列教程，这是第一篇。

本篇文章提到的代码片段和预览效果均在 demo-onlyoffice Github，克隆后对照查看会有更好的阅读体验。

Onlyoffice 简单介绍

Onlyoffice 是什么？

Onlyoffice 是一个多端协同的 Office 办公套件，相当于微软的 Office365 全家桶。

功能

功能强大到什么程度呢？我列了一下 Onlyoffice 对我们需求的支持程度：

需求	支持程度
终端支持	全端支持，包含桌面端、PC 网页端、移动端等
客户端操作系统	Windows、Mac、Linux
服务端操作系统	Linux、Ubuntu、CentOS、Debian、Alibaba Cloud Image 等 Docker 镜像包
基础功能	具备 Word 基础的字体设置、字体大小、加粗、对齐、颜色、背景颜色等功能，同时还有等同于 Office 的各个高级功能
插件支持	支持自定义插件，官方提供了完整的插件开发文档
二次开发	官方开放了 1000+ API，支持根据业务二次开发、功能定制，甚至扩展或增强基础功能
深度定制	支持
使用体验	安装成本低，编辑体验与本地 Word 高度一致
开发者社区	官方维护了一个开发者社区，内容丰富，也比较活跃
安全与稳定性	文档加密保存、传输支持标准的 JWT 加密，多种场景测试未出现崩溃、卡死等情况
协同	支持多人协同编辑、历史记录查看，文档回滚等功能
分布式部署	支持

收费

社区版免费，企业版收费，10w 起步。

适用场景

0 预算、私有云、需要二次开发、需要文档协同等。

开发

快速起步指南

1、安装 Docker

2、安装并启动 Onlyoffice 服务：

sudo docker run -i -t -d -p 8701:80 onlyoffice/documentserver
复制代码

如果是第 1 次执行这个命令，会先去下载 Onlyoffice，比较慢，约等待 3~10 分钟，网络畅通一点的会快一些。如果是已经安装过则直接进行启动。

3、启动内置服务。

先执行 docker ps 查看 Onlyoffice 容器 ID：

然后执行 docker exec -it ID /bin/bash 进入容器，这里将获取到的 ID 替换一下：

# 注意这里要将 id 替换成自己的
docker exec -it f2a3eb675ad1 /bin/bash
复制代码

接着执行下面的这两个命令：

# 启动所有的内置服务
supervisorctl restart all
# 退出容器
exit
复制代码

命令输出如下：

最后访问 http://IP:8701/example 页面（这里要注意，IP 不能是 localhost 和 127.0.0.1，一定要用真实 IP 来访问），看到下面的这个效果说明 Onlyoffice 启动成功：

在 Vue 中接入 Onlyoffice

只需要关键的 3 步即可在 Vue.js 集成 Onlyoffice。

1、在 template 添加一个 div 作为 Onlyoffice 实例化容器：

<div id="onlyoffice"></div>
复制代码

2、引入 Onlyoffice 提供的入口 JS 文件：

const script = document.createElement('script')
script.src = 'http://IP/web-apps/apps/api/documents/api.js'
script.onload = createEditor
document.head.appendChild(script)
复制代码

3、在脚本加载完成时，初始化 Onlyoffice 实例：

createEditor () {
  this.editor = new window.DocsAPI.DocEditor('onlyoffice', editorConfig)
}
复制代码

其中的 editorConfig 配置项如下：

// 编辑器配置项，完整配置项参见：https://api.onlyoffice.com/editors/config/
const editorConfig = {
  // 编辑器宽度
  width: 1200,
  // 编辑器高度
  height: 800,
  // 编辑器类型，支持 word（文档）、cell（表格）、slide（PPT）
  documentType: 'word',
  // 文档配置
  document: {
    // 文件类型
    fileType: 'docx',
    // 文档标识符
    key: 'test1.docx',
    // 文档地址，绝对路径
    url: 'http://IP/static/test1.docx',
    // 文档标题
    title: '测试文档一.docx'
  }
}
复制代码

集成后的效果如下：

完整代码已上传到 demo-onlyoffice Github，基于 Nest 和 Vue.js 构建。

克隆下来后，需要将 onlyoffice-vue/.env 里面的 VUE_APP_HOST 和 onlyoffice-server/.env 里面的 HOST 字段统一替换成自己的本机 IP。

然后依次执行下面的命令：

# 启动前端
cd onlyoffice-vue
# 安装依赖
pnpm install
# 启动开发服务
pnpm run dev

# 启动后端
cd onlyoffice-server
# 安装依赖
pnpm install
# 启动开发服务
pnpm run dev
复制代码

最后打开 http://127.0.0.1:3001/onlyoffice/document/quick-start 即可看到效果。