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>

相关推荐
RadiumAg34 分钟前
记一道有趣的面试题
前端·javascript
yangzhi_emo38 分钟前
ES6笔记2
开发语言·前端·javascript
yanlele1 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
Dann Hiroaki1 小时前
笔记分享: 哈尔滨工业大学CS31002编译原理——02. 语法分析
笔记·算法
KhalilRuan1 小时前
Unity-MMORPG内容笔记-其三
笔记
中微子2 小时前
React状态管理最佳实践
前端
烛阴2 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子2 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
kfepiza2 小时前
Debian的`/etc/network/interfaces`的`allow-hotplug`和`auto`对比讲解 笔记250704
linux·服务器·网络·笔记·debian
Hexene...2 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts