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>

相关推荐
非 白14 分钟前
【Java】单例模式
java·笔记·单例模式
qianmoQ15 分钟前
第五章:工程化实践 - 第三节 - Tailwind CSS 大型项目最佳实践
前端·css
椰果uu30 分钟前
前端八股万文总结——JS+ES6
前端·javascript·es6
明阳mark40 分钟前
Ansible 学习笔记
笔记·学习·ansible
微wx笑1 小时前
chrome扩展程序如何实现国际化
前端·chrome
~废弃回忆 �༄1 小时前
CSS中伪类选择器
前端·javascript·css·css中伪类选择器
CUIYD_19891 小时前
Chrome 浏览器(版本号49之后)‌解决跨域问题
前端·chrome
转身後 默落1 小时前
11.Docker 之分布式仓库 Harbor
分布式·docker·容器
IT、木易1 小时前
跟着AI学vue第五章
前端·javascript·vue.js
薛定谔的猫-菜鸟程序员1 小时前
Vue 2全屏滚动动画实战:结合fullpage-vue与animate.css打造炫酷H5页面
前端·css·vue.js