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

M木
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

avatar
文章
阅读
粉丝