目录

onlyoffice-服务搭建及配置-前端-office-文件预览解决方案

onlyoffice 服务搭建及配置 - 前端 office 文件预览解决方案

1. 安装

写文章时使用环境 Windows 11 + onlyoffice 8.3,以满足离线部署为主,不同版本 onlyoffice 略有差异,大致流程都是相通的,有条件的话直接用 docker 最简单

1.1 环境要求

下面版本要求由官方提供,实测直接装最新就行

  • Erlang: version 24.2
    官网:
    Windows 下载页:
  • RabbitMQ: version 3.9.1
    官网:
    Windows 下载页:
  • PostgreSQL: version 12.9 or later
    官网:
    Windows 下载页:

1.2 安装步骤

  1. 安装 PostgreSQL

  2. 创建数据库,名字都可以(onlyoffice 默认连接参数:库名、用户名、密码都是 onlyoffice,看情况设置就好了,安装 only office 的时候可以设置)

  3. 安装 erlang 和 RabbitMQ,安装路径看着填,其它选项默认就好了

  4. 根据系统类型选择合适的 onlyoffice 版本:

  5. 安装的时候看情况点就好了。到 Select Componets,这里能不选的就不选,对预览功能是没有影响的,选上下载的会很慢(老版本就没有这些选项,最近新版本出了这些,还没研究有啥作用,有知道的可以指点一下)

    因为 OpenSSL 不能取消选中,所以离线安装的时候会下载失败导致报错,这里是不影响最终预览效果的,直接忽略即可。
    https://i-blog.csdnimg.cn/direct/dc7fbd54f6034c02a87a81a39c7b41cd.png

  6. 数据库配置
    onlyoffice 默认的数据库参数连不上数据库的,老版本还没这验证,这里点确定的话也直接就跳过了,数据库参数错了,安装好用不了的,后面还得导一遍数据库,这里点击取消,修改数据库参数即可
    https://i-blog.csdnimg.cn/direct/d346a6a16b7a44a28a6a748743622e3c.png

    点击取消后弹出数据库配置信息,根据自己数据库信息填写好即可
    https://i-blog.csdnimg.cn/direct/d8e87395d8ee4da1920c7541b8efe40e.png

  7. 安装完成
    最后一步可能会很慢,慢则几个小时都有可能,耐心等待即可

    弹出下面弹窗点击确定即可,就是提示https://i-blog.csdnimg.cn/direct/c36afd8bdb7d4ceda2934c82cd45c372.png

1.3 常用配置

这里就写写影响预览的一些配置

1.3.1 安装目录/config/default.json

  • 允许使用本地IP文件:
    比如 http://127.0.0.1/**/xxx.ppt 这种文件默认是无法使用的,将下面两个配置设置为 true 就可以了
    services.CoAuthoring.request-filtering-agent.allowPrivateIPAddress
    services.CoAuthoring.request-filtering-agent.allowMetaIPAddress
    https://i-blog.csdnimg.cn/direct/e2862ca43130486289d162ef315d5e6f.png

1.3.2 安装目录/config/local.json

  • JWT 验证
    onlyoffice 新版本默认启用 JWT 验证,就是前端使用的时候需要携带正确的token,这里就不展开说了。
    services.CoAuthoring.token.enable:全部设置为 false 表示禁用 JWT 验证
    https://i-blog.csdnimg.cn/direct/e5a92173132947bea9633b2b1c42a6e7.png

1.3.3 安装目录/nginx/conf

  • 端口修改
    打开文件:安装目录/nginx/conf/ds.conf
    将 两处 80 改成需要的端口即可,比如下面改成 81 端口:
    https://i-blog.csdnimg.cn/direct/a4597c4c931448ae8d98aea42f66b800.png
  • 单机环境启动配置
    就是局域网环境都没有,单独一个电脑部署,nginx 启动会失败,导致网站访问不了,需要改掉配置里的 localhost,换成 127.0.0.1
    打开文件:安装目录/nginx/conf/includes/http-common.conf
    https://i-blog.csdnimg.cn/direct/9015c832d94f413380fa03d7abfd2552.png

1.3.4 配置生效

改完配置后需要重启服务(可以 win+r 运行 services.msc 调出系统服务面板)

  • default.json 和 local.json: 重启 ONLYOFFICE Document Server ConverterONLYOFFICE Document Server DocService
    https://i-blog.csdnimg.cn/direct/8547874e98eb4dbea6dba65292fff2c1.png
  • nginx 配置: 重启 ONLYOFFICE Document Server Proxy
    https://i-blog.csdnimg.cn/direct/ce3ef261551d43ca8632279ef664678d.png

2. 网站嵌入

2.1 代码示例

首先需要加载 onlyoffice 提供的 js 文件(地址:onlyoffice地址/web-apps/apps/api/documents/api.js),引入后全局会有个 DocsAPI 对象,下面是个简单的使用示例:


<!DOCTYPE html>
	<html lang="zh">
	
	<head>
	  <meta charset="UTF-8">
	  <title>onlyoffice 预览测试</title>
      <!-- 引入 api.js -->
	  <script src="http://localhost:81/web-apps/apps/api/documents/api.js"></script>
	</head>
	
	<body style="margin: 0;height: 100vh;">
	
	  <div id="onlyoffice">
	    
	  </div>
	  <script>
	
	    const config = {
	      // 设置文档信息
	      document: {
	        fileType: "ppt", // 文件类型,支持 doc、ppt、pdf、xls
	        title: '标题',
	        url: 'http://localhost:5500/docs/PPT.pptx', // 文件链接
	      },
	      editorConfig: {
	        lang: "zh-CN",  // 语言
	        mode: 'view', // 查看模式 view: 预览模式 edit(默认): 编辑模式
	        customization: {
	          zoom: 100 // 页面默认缩放, 默认就是 100
	        }
	      },
	      events: {
	        onDocumentReady() {
	          alert('加载完成')
	        }
	      }
	    };
	    new window.DocsAPI.DocEditor("onlyoffice", config);
	  </script>
	</body>

</html>

2.2 最终效果

https://i-blog.csdnimg.cn/direct/2d5d17ea0cbd421ea584181a63b4ab92.png
https://i-blog.csdnimg.cn/direct/68c826d936b54bd78b2b1c98ec03f740.png

3. 常见问题

一般都是一些细节没处理好,翻翻 安装目录/Log/ 下面相关日志就好了

3.1 数据库配置错误导致加载不出来

https://i-blog.csdnimg.cn/direct/1d8d26d5c7cf4804a11e6d8f271d5230.png
日志记录: 安装目录/Log/docservice/DocService_xxx.out.log

SQL 相关的报错都适用,如下:
https://i-blog.csdnimg.cn/direct/3935b0671b38410eb7842a5b373ced7b.png
https://i-blog.csdnimg.cn/direct/f3f70730526e4ad48a6462dcc3123b37.png
https://i-blog.csdnimg.cn/direct/a4d5fb1adeff462a86b67bb37d29439a.png

  1. 数据库配置
    创建库,执行创建表 sql 安装目录\server\schema\postgresql\createdb.sql
    https://i-blog.csdnimg.cn/direct/863546f2d5d74d60833fc6dc1b823d46.png
  2. 确认连接参数正确
    打开配置文件:安装目录/config/local.json
    检查 services.CoAuthoring.sql 参数是否正确
    https://i-blog.csdnimg.cn/direct/7d9bdd7e13d74eaa83b59bbc066e26a8.png