一、起步
经过上一章对文件预览的实现效果可以看到,在使用一些插件库对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】查看容器日志,如果没有报错,我们的容器就算启动成功了。
然后我们直接访问我们的虚拟机ip加上9001端口,如果能够进入下面的页面,那么我们的onlyoffice看就算部署成功了
三、前端调用及调试
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>
注意:这里如果报错Uncaught ReferenceError: DocsAPI is not defined
,检查你的js文件是否引入成功。
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);
把这段代码放入到预览按钮的点击事件的回调函数中,当我们点击后可能会出现这样的情况,提示我们下载失败:
这个时候我们回到我们的虚拟机,查看容器的日志,会发现这么一个报错:
意思是我们要预览的这个文件的下载时出错了,因为ip是私有ip(如果你要预览的ip是公网ip的话不会出现这个报错)
如何解决?
这个时候我们要做的就是修改容器内的default.json配置文件,由于容器内是没有vim命令的,所以我们先把default.json拷贝到宿主机,在宿主机修改完成后再拷贝到容器内:
# 拷贝容器内的文件到宿主机(cc4eb3889c16是我的容器id,这里要换成你的)
docker cp cc4eb3889c16:/etc/onlyoffice/documentserver/default.json ./
# 编辑文件,将下图框中的两项设为true
vim default.json
# 重新将我们修改过的文件拷贝到容器内
docker cp ./default.json cc4eb3889c16:/etc/onlyoffice/documentserver/default.json
# 重启容器
docker restart cc4eb3889c16
做完这些后,我们再回到页面上点击预览按钮,我们就能正常看到文件内容了
四、预览效果
excel预览效果
word预览效果
ppt预览效果
pdf预览效果(’试用水印‘是预览的pdf文件本身就有的)