Vue3集成OnlyOffice，Vue2应该也能用

1. OnlyOffice的docker部署

1.1 pull and run

docker部署这方面教程很多，我是直接在 docker desktop 中搜索 OnlyOffice 拉取就行，如下图
在这里插入图片描述

我把启动端口设置为9000了，更改在docker desktop的images里设置
在这里插入图片描述
在这里插入图片描述

1.2 验证有效性

容器运行成功后打开：http://localhost:9000/welcome/
在出现的界面中划到最底下，逐步复制并cmd运行官方这两条指令

docker exec 90fd1606973c sudo supervisorctl start ds:example

docker exec 90fd1606973c sudo sed 's,autostart=false,autostart=true,' -i /etc/supervisor/conf.d/ds-example.conf

在这里插入图片描述
指令运行成功后点击上图界面中的“GO TO TEST EXAMPLE”，成功出现以下界面即可
在这里插入图片描述

2. 在前端项目中集成

2.1 index.html

首先在index.html里引入以下代码

<!-- 在线编辑word， localhost可以换成自定义ip -->
<script src="http://localhost:9000/web-apps/apps/api/documents/api.js"></script>

接下来先是创建 vabOnlyOffice 作为子组件，再在 editWord 父组件里进行调用
我的 editWord 组价是通过其他页面路由传入的文件路径实现的功能，注意中文名称的文件最好也做一下编码

2.2 editWord.vue

<template>
  <div style="height: 88vh">
    <vab-only-office :option="option" style="height: 1000px" />
  </div>
</template>

<script>
  import vabOnlyOffice from './vabOnlyOffice.vue';

  export default {
    components: {
      vabOnlyOffice,
    },
    data() {
      return {
        //参考vabOnlyOffice组件参数配置
        option: {
          url: '',
          isEdit: true,
          fileType: 'docx',
          title: '文档编辑',
          lang: 'zh-CN',
          isPrint: true,
          user: { id: 1, name: '张三' }, // 用户信息
        },
        show: false,
      };
    },
    mounted() {
      let filePath = this.$route.query.path;
      filePath = encodeURIComponent(filePath.split('/')[1]);
      this.option.url = `http://192.168.31.243:8080/${filePath}`; //换成自己的能访问到的链接，主要是给OnlyOffice能访问本机资源的路径，但是不能用localhost，会指向容器的local
    },
    methods: {
      getFile() {
        this.show = true;  //OnlyOffice的配置选项
        // getAction('/file/selectById', { id: this.id }).then(res => {
        this.option.isEdit = false;
        this.option.lang = 'zh-CN';
        this.option.title = '123';
        this.option.fileType = 'docx';
        this.option.isPrint = false;
        this.option.user = { id: 12, name: '张三' };
        // })
      },
      close() {
        this.show = false;
      },
    },
  };
</script>

<style>
  html,
  body {
    height: 100%;
  }
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    height: 100%;
  }
  .qualityManual-container {
    padding: 0 !important;
    height: 100%;
  }
  .qualityManual-container-office {
    width: 100%;
    height: calc(100% - 55px);
  }
</style>

2.3 vabOnlyOffice.vue

<template>
  <div id="vabOnlyOffice"></div>
</template>

<script>
  export default {
    name: 'VabOnlyOffice',
    props: {
      option: {
        type: Object,
        default: () => ({}),
      },
    },
    data() {
      return {
        doctype: '',
        docEditor: null,
      };
    },
    watch: {
      option: {
        handler: function (n) {
          this.setEditor(n);
          this.doctype = this.getFileType(n.fileType);
        },
        deep: true,
      },
    },
    mounted() {
      const script = document.createElement('script');
      script.src = 'http://localhost:9000/web-apps/apps/api/documents/api.js'; //改成自己的ip也行
      script.onload = () => {
        if (this.option.url) {
          this.setEditor(this.option);
        }
      };
      script.onerror = () => {
        console.error('Failed to load OnlyOffice DocsAPI script.');
      };
      document.head.appendChild(script);
    },
    beforeUnmount() {
      if (this.docEditor !== null) {
        this.docEditor.destroyEditor();
        this.docEditor = null;
      }
    },
    methods: {
      setEditor(option) {
        if (this.docEditor !== null) {
          this.docEditor.destroyEditor();
          this.docEditor = null;
        }
        this.doctype = this.getFileType(option.fileType);
        const config = {
          document: {
            fileType: option.fileType,
            key: option.key || '',
            title: option.title,
            permissions: {
              edit: option.isEdit,
              print: option.isPrint,
              download: true,
            },
            url: option.url,  //文件url
          },
          documentType: this.doctype,
          editorConfig: {
            callbackUrl: option.editUrl,
            lang: option.lang,
            customization: {
              autosave: false,
              chat: false,
              comments: false,
              help: false,
              plugins: false,
            },
            user: {  //拓展协同编辑有影响的信息
              id: option.user.id,
              name: option.user.name,
            },
            mode: 'edit',
          },
          width: '100%',
          height: '100%',
          token: option.token || '', //jwt令牌
        };
        this.docEditor = new DocsAPI.DocEditor('vabOnlyOffice', config);
      },
      getFileType(fileType) {
        const fileTypesDoc = ['doc', 'docx', 'txt'];
        const fileTypesCsv = ['csv', 'xls', 'xlsx'];
        const fileTypesPPt = ['ppt', 'pptx'];
        if (fileTypesDoc.includes(fileType)) return 'text';
        if (fileTypesCsv.includes(fileType)) return 'spreadsheet';
        if (fileTypesPPt.includes(fileType)) return 'presentation';
        return '';
      },
    },
  };
</script>

3. 解决“令牌不合规”和“文件下载失败”的问题

这俩问题都是我在DeepSeek的辅助下解决的，如果有同样的问题一直解决不了的话真心推荐和ai沟通沟通

3.1 令牌不合规

我是通过禁用 OnlyOffice 的 JWT 解决的，项目中有鉴权，也不太需要 OF 的拦截

3.1.1 进入 OnlyOffice 容器

首先，找到你的 OnlyOffice 容器的 ID 或名称：

docker ps

输出示例：

CONTAINER ID   IMAGE                              COMMAND                  CREATED          STATUS          PORTS                           NAMES
90fd1606973c   onlyoffice/documentserver:latest   "/app/ds/run-documen…"   51 minutes ago   Up 51 minutes   443/tcp, 0.0.0.0:9000->80/tcp   peaceful_lewin

进入容器：

docker exec -it 90fd1606973c bash

3.1.2 修改配置文件

OnlyOffice 的配置文件位于 /etc/onlyoffice/documentserver/local.json。

使用 vi 或 nano 编辑该文件：

nano /etc/onlyoffice/documentserver/local.json

找到 services.CoAuthoring.token部分，将其值改为 false：

{
  "services": {
    "CoAuthoring": {
      "token": {
        "enable": {
          "request": {
            "inbox": false,
            "outbox": false
          },
          "browser": false
        }
      }
    }
  }
}

3.1.3 重启 OnlyOffice 服务

修改配置文件后，需要重启 OnlyOffice 服务以使更改生效。

在容器内运行以下命令：

supervisorctl restart all

完成修改后，退出容器：

exit

3.2 文件下载失败

需要修改配置文件允许私有IP访问：编辑/etc/onlyoffice/documentserver/default.json文件
还是在容器中

nano /etc/onlyoffice/documentserver/default.json

找到并将以下字段设置为true：

"request-filtering-agent" : {
    "allowPrivateIPAddress": true,
    "allowMetaIPAddress": true
}

修改完成后，重启：

supervisorctl restart all
# windows
Logo
DeepSeek技术社区

欢迎加入DeepSeek 技术社区。在这里，你可以找到志同道合的朋友，共同探索AI技术的奥秘。

更多推荐

cover

AI自动化软件工程---Manus与DeepSeek区别与联系

avatar DeepSeek技术社区
cover

模拟人生：AI赋能的平行人生实验室

avatar DeepSeek技术社区
cover

深入浅出大模型：预训练、监督微调、强化学习、RLHF

avatar DeepSeek技术社区