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

·  阅读 272
如何构建基于 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:

onlyoffice-docker-ps.png

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

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

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

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

命令输出如下:

onlyoffice-docker-restart.png

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

onlyoffice-example.png

在 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'
  }
}
复制代码

集成后的效果如下:

onlyoffice-quick-start.png

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

克隆下来后,需要将 onlyoffice-vue/.env 里面的 VUE_APP_HOSTonlyoffice-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 即可看到效果。

分类:
前端
收藏成功!
已添加到「」, 点击更改