【前端】搭建onlyoffice踩坑记录

最新推荐文章于 2025-04-30 15:18:20 发布

青春狗头少年不会梦到格温学姐

最新推荐文章于 2025-04-30 15:18:20 发布

阅读量1.4k

点赞数 6

文章标签：前端 vue.js vue

本文链接：https://blog.youkuaiyun.com/2301_76933862/article/details/136748512

版权

文章目录

背景

众所周知，onlyoffice是一款web端的office编辑工具，但是实际使用过程中，还是存在不少坑点, 特此记录。

docker运行onlyoffice

## 启动镜像 来源https://blog.youkuaiyun.com/weixin_56760813/article/details/129221676
docker run -itd -p 8701:80 --name=onlyoffice frost1123/office:7.3.2.8
## 开启example服务
docker exec onlyoffice sudo supervisorctl start ds:example

访问：http://你的IP/example 会出现如下页面
在这里插入图片描述

word编辑器

在这里插入图片描述

excel编辑器

在这里插入图片描述

pptx编辑器

在这里插入图片描述

html中调用

代码来源：https://blog.youkuaiyun.com/lz610756247/article/details/136189156

**适用于7.3到7.5，别的没测试过**
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="http://47.94.91.67:10100/web-apps/apps/api/documents/api.js"></script>
    <style>
        body {
            width: 100%;
            height: 90vh;
            display: flex;
            flex-direction: column;
        }
        
        #placeholder {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
 
<body>
    <div id="placeholder" class="nav" style="width: 100%; height: 100vh;"></div>
 
</body>
<script>
 
    var onDocumentReady = function () {
        console.log("文档准备好了");
    };
 
 
    var config = {
        "documentType": "word",
        "historyList": {
            "history": [],
            "currentVersion": "1"
        },
        "document": {
            "title": "【经营】通用合同模板.docx",
            "url": "https://d2nlctn12v279m.cloudfront.net/assets/docs/samples/zh/demo.docx",
            "permissions": {
                "print": false,
                "download": true
            },
            "attachId": "e932e7bb1e4d449aa9a7d8b403b4b517",
            "fileType": "docx",
            "key": "e932e7bb1e4d449aa9a7d8ss517"
        },
        "editorConfig": {
            "customization": {
                "autosave": false,
                "compactToolbar": true,
                "forcesave": true,
                "toolbarNoTabs": true,
                "help": false,
                "compactHeader": true,
                "hideRightMenu": true,
            },
            "mode": "edit",
            "callbackUrl": "https://www.onlyoffice.com/post.ashx?type=editor-callback",
            "lang": "zh-CN",
            "user": {
                "name": "曹瑞剑雄",
                "id": "103"
            }
        }
    };
 
 
    var docEditor;
    initDocEditor();
    
 
    /**
     * 初始化编辑器
     */
    function initDocEditor() {
        // 初始化配置
        config['events'] = {
            onDocumentReady: onDocumentReady
        };
        docEditor = new DocsAPI.DocEditor("placeholder", config);
    }
 
 
</script>
 
</html>

坑点1 文件下载错误

上述前端demo中，config.document.url必须是https协议，不然就是下载文件错误。即使你的文件在浏览器中是可以正常下载的
在这里插入图片描述
错误如下：

推测: 要么文件url需要为https协议，要么前端访问地址和文件url同源（hostname,port,protocol三者一致）才能正常下载。