Docker集成onlyoffice实现预览功能

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.运行容器

docker run -i -t -d -p 8089: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_SECRET=my_jwt_secret onlyoffice/documentserver

访问onlyoffice地址:http://服务器ip:8089

4.关闭token认证

onlyoffice7.2版本之后默认开启jwt验证。 所以这里我们需要关闭token认证,不然就会出现如下图所示:

关闭认证:

更改/etc/onlyoffice/documentserver/local.json

docker exec -it [容器id] bin/bash

cd /etc/onlyoffice/documentserver

sed -i 's/true/false/g' local.json

supervisorctl restart all

5.允许私有ip

进入容器内部至/etc/onlyoffice/documentserver/default.json ,修改此配置文件,如下图所示:

然后重启容器:docker restart 容器id。

6.页面预览

html 复制代码
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
</head>
<body>
<!-- 注意:121.199.75.131:8089是我部署的ip+端口,这个要换成你的 -->
   <script type="text/javascript" src="http://121.199.75.131:8089/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
        const config = {
            document: {
                // 文件类型
                fileType: 'xlsx', 
                title: 'exam.xlsx', // 展示的文件名称
                url: 'http://121.199.75.131:5403/images/car_peer.xlsx',// 需要预览的url(这里是我服务器中的一个文件地址)
            },
            editorConfig: {
                // 只读
                mode: 'view',
            }, // 文档类型
            documentType: 'cell', // 预览区域的宽度
            width: '100%', // 预览区域的高度
            height: '700px',
        };
        const docEditor = new DocsAPI.DocEditor('preview', config);
    });
</script>
</body>
</html>

相关推荐
Mahut14 小时前
从零构建神经影像可视化库:neuroviz 的架构设计与实现
前端·javascript·github
慧一居士14 小时前
VueUse 功能介绍使用场景及完整使用示例
前端·vue.js
奇怪的猫14 小时前
浏览器窗口最小化的时候,setInterval 执行变慢,解决方案
前端·javascript
多租户观察室14 小时前
工作流新生态:2026年工作流与Coding的重新分工
前端·人工智能·后端·低代码
cmd14 小时前
别再混淆了!JS类型转换底层:valueOf vs toString vs Symbol.toPrimitive 详解
前端·javascript
Carsene14 小时前
开源项目文档架构设计:Git Submodule 实现文档与代码的优雅分离
前端·后端
Z思学14 小时前
promise 有几种状态 async/await 和promise 有什么关系
前端
han_14 小时前
JavaScript设计模式(四):发布-订阅模式实现与应用
前端·javascript·设计模式
276695829214 小时前
租车帮(悟空)订单查询算法分析
java·服务器·前端·悟空·悟空app·租车帮·租车帮逆向
__雨夜星辰__14 小时前
TypeScript 入门学习笔记(面向对象 + 常用设计模式)
前端·学习·typescript