前端通过onlyoffice实现office文件的在线预览

1,298 阅读6分钟

一、起步

经过上一章对文件预览的实现效果可以看到,在使用一些插件库对office类文件的预览效果并不是那么理想,本章我们就来实现下上节末提到的使用onlyoffice来实现office文件的预览,下面是官方给出的介绍:

ONLYOFFICE Docs 是一个开源办公套件,包括用于文本文档、电子表格、演示文稿和可填写表单的编辑器。它提供以下功能:

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

ONLYOFFICE Docs 还支持 WOPI 协议,该协议用于将您的应用程序与在线办公室集成。

二、部署onlyoffice

准备

  • 需要有一台服务器(或者本地虚拟机,本章用虚拟机来演示,如果没有可以先装台虚拟机)

  • 基于Docker部署,保证虚拟机已经安装了docker

     # ⬇⬇⬇⬇ 傻瓜式安装docker ⬇⬇⬇⬇
     
     # 1. 安装工具包
     yum install -y yum-utils device-mapper-persistent-data lvm2
     
     # 2. 设置镜像源
     yum-config-manager --add-repo https://mirrors.aliyun.com/dockerce/linux/centos/docker-ce.repo
     
     # 3. 安装docker
     yum install -y docker-ce
     
     # 4. 启动docker
     systemctl start docker
     
     # 5. 查看docker是否启动
     systemctl status docker
    
  • 虚拟机的操作系统及版本为centos 7.8

保证准备工作完成后,接下来就是根据官方文档[Installing ONLYOFFICE Docs for Docke]来拉取镜像并运行容器了,下面是官方给出的系统要求:

  • CPU:双核 2 GHz 或更高

  • RAM:4 GB 或更多

  • HDD:至少 40 GB 的可用空间

  • SWAP:至少 4 GB,但取决于主机操作系统。越多越好

  • 内核:版本为 3.10 或更高版本的操作系统 amd64 Linux 发行版

  • 其他要求

    • Docker:Docker 团队支持的任何版本

ps:我的虚拟机是2核2G 20G内存也能完成部署。

接下来根据以下步骤完成部署:

# 1. 拉取镜像
docker pull onlyoffice/documentserver

# 2. 等待镜像拉取完成之后创建目录,用于数据卷的挂载
mkdir -p app/onlyoffice/DocumentServer/logs 
mkdir -p app/onlyoffice/DocumentServer/data 
mkdir -p app/onlyoffice/DocumentServer/lib 
mkdir -p app/onlyoffice/DocumentServer/db

# 3. 运行容器,这里我们将端口映射到宿主机的9001端口
docker run -i -t -d -p 9001: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 -e JWT_ENABLED=false onlyoffice/documentserver
  
# 需要说明的是 -e JWT_ENABLED=false 这个指令,onlyoffice从7.2版本开始,添加了随机生成的 JWT 密钥,也就是客户端调用服务端时要通过正确的密钥校验,这里我们把这个选项关掉。

容器运行完成之后,我你们通过docker logs 【容器id】查看容器日志,如果没有报错,我们的容器就算启动成功了。

运行容器并查看容器运行状态.jpg

然后我们直接访问我们的虚拟机ip加上9001端口,如果能够进入下面的页面,那么我们的onlyoffice看就算部署成功了

访问虚拟机9001端口.jpg

三、前端调用及调试

onlyoffice部署完成之后,我们新建一个html文件,引入调用onlyoffice的js脚本文件,运行这个js文件后,我们的全局对象就被注入了一个DocsAPI对象,也就是调用onlyoffice的对象,通过调用这个对象上面的构造函数就能完成我们的office预览了。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 注意:192.168.200.100:9001是我部署的ip+端口,这个要换成你的 -->
    <script
      type="text/javascript"
      src="http://192.168.200.100:9001/web-apps/apps/api/documents/api.js"></script>
    
    <button id="previewBtn">预览</button>
    <div id="preview"></div>
    <script type="module">
      console.log('DocsAPI:', DocsAPI);
      const previewBtn = document.getElementById('previewBtn');
      previewBtn.addEventListener('click', () => {
       // 这里我们要预览office
      });
    </script>
  </body>
</html>     

控制台打印DocsAPI.jpg

注意:这里如果报错Uncaught ReferenceError: DocsAPI is not defined,检查你的js文件是否引入成功。

检查js文件是否引入.png

api成功引入之后,接下来就是通过调用来实现office的预览的,预览方法很简单,我们只需要调用const docEditor = new DocsAPI.DocEditor('preview', config),它就会自动在id为preview的div内生产预览的效果,我们需要关心的就是config这个配置了,我们需要通过这个配置让服务知道,我们要预览的是哪个文件,文件的类型是什么及一些预览的设置,关于这个参数的配置可以参考Advanced parameters,官方提供了很多参数配置项,我们要实现最基本的office预览的话我们只需要关注一些必要参数就行了,下面我来列举下这些我们需要关注的参数:

documentType,也就是文档类型,它接收一个字符串类型的值,用来定义要打开的文档类型:

  • word - text document ( .doc, .docm, .docx, .dot, .dotm, .dotx, .epub, .fb2, .fodt, .htm, .html, .mht, .mhtml, .odt, .ott, .rtf, .stw, .sxw, .txt, .wps, .wpt, .xml);
  • cell - spreadsheet ( .csv, .et, .ett, .fods, .ods, .ots, .sxc, .xls, .xlsb, .xlsm, .xlsx, .xlt, .xltm, .xltx, .xml);
  • slide - presentation ( .dps, .dpt, .fodp, .odp, .otp, .pot, .potm, .potx, .pps, .ppsm, .ppsx, .ppt, .pptm, .pptx, .sxi);
  • pdf - portable document format ( .djvu, .docxf, .oform, .oxps, .pdf, .xps).

width和height,定义浏览器窗口中的文档的宽度和高度。

document,接收一个对象,document 部分允许更改与文档相关的所有参数(标题、url、文件类型等)。

editorConfig,接收一个对象,editorConfig 部分允许更改与编辑器界面相关的参数:打开模式(查看器或编辑器)、界面语言、附加按钮等)。

所以我们的基本配置就变成了这样子:

  const config = {
    document: {
      // 文件类型
      fileType: 'xlsx', // 展示的文件名称
      title: 'exam.xlsx', // 需要预览的url(这里是我服务器中的一个文件地址)
      url: 'http://192.168.200.100:9000/mblog/public/满意度调查统计表.xlsx',
    },
    editorConfig: {
      // 只读
      mode: 'view',
    }, // 文档类型
    documentType: 'cell', // 预览区域的宽度
    width: '100%', // 预览区域的高度
    height: '700px',
  };
  const docEditor = new DocsAPI.DocEditor('preview', config);     

把这段代码放入到预览按钮的点击事件的回调函数中,当我们点击后可能会出现这样的情况,提示我们下载失败:

提示下载失败.jpg

这个时候我们回到我们的虚拟机,查看容器的日志,会发现这么一个报错:

报错.jpg

意思是我们要预览的这个文件的下载时出错了,因为ip是私有ip(如果你要预览的ip是公网ip的话不会出现这个报错)

如何解决?

这个时候我们要做的就是修改容器内的default.json配置文件,由于容器内是没有vim命令的,所以我们先把default.json拷贝到宿主机,在宿主机修改完成后再拷贝到容器内:

# 拷贝容器内的文件到宿主机(cc4eb3889c16是我的容器id,这里要换成你的)
docker cp cc4eb3889c16:/etc/onlyoffice/documentserver/default.json ./

# 编辑文件,将下图框中的两项设为true
vim default.json

允许私有ip访问.png

# 重新将我们修改过的文件拷贝到容器内
docker cp ./default.json cc4eb3889c16:/etc/onlyoffice/documentserver/default.json

# 重启容器
docker restart cc4eb3889c16

做完这些后,我们再回到页面上点击预览按钮,我们就能正常看到文件内容了

四、预览效果

excel预览效果

excel预览.jpg

word预览效果

word.jpg

ppt预览效果

ppt.jpg

pdf预览效果(’试用水印‘是预览的pdf文件本身就有的)

pdf.jpg