【vue2+onlyoffice】基础预览demo运行+问题解决

之前其实写过Onlyoffice的使用，但是写得不太完整，这次补充下。

一、OnlyOffice简介

ONLYOFFICE，是一个包含常用办公套件，Word 、Excel、PPT大办公套件搬到了云端，只需要一个浏览器即可以在线使用 Office 的各种功能。
特色：可以用于文档处理、协作编辑、项目管理和文档预览等多种用途。
版本对比：
- 开源版（Community Edition）：
  免费提供，适用于个人用户和小型团队。
  包含基本的文档处理、协作编辑和项目管理功能。
  支持跨平台运行和多人协作编辑。（同一个文档同一时间不能超过20人协同编辑）
- 专业版（Professional Edition）：
  面向个人用户和小型团队，需付费使用。
  提供了企业版的全部功能，以及更多的定制选项和扩展功能，如API集成、插件支持等。
- 企业版（Enterprise Edition）：
  针对企业用户提供，需付费使用。
  提供了高级功能和技术支持服务，如CRM集成、文档版本控制、权限管理等。
  具备更高级的安全性和可定制性，支持LDAP/AD集成、SSO登录等企业级认证和安全机制。
- 云版（Cloud Edition）：
  基于云端的服务模式，无需自行部署服务器。
  提供与开源版和企业版相似的功能，包括文档编辑、协作、项目管理等。
  提供不同的订阅计划和灵活的服务规模，适用于不想自行管理服务器的用户或团队。

对于一般内部项目来说开源版足够了。如果需要去掉它自带的logo和名称是需要付费版的。

二、服务组成

ONLYOFFICE文档服务分为客户端和服务端两部分。

客户端包括：
文档管理器（Document manager）
文档编辑器（Document editor）

服务端包括：
文档存储服务（Document storage service）
文档编辑服务（Document editing service）
文档指令服务（Document command service）
文档转换服务（Document conversion service）
文档构建服务（Document builder service）

三、工作原理

1.打开文件

1、用户使用文档管理器打开文档进行查看或者编辑。（基于浏览器访问）
2、使用JavaScript API 将文档唯一标识符（key）以及文档URL（url）发送到文档编辑器。
3、文档编辑器向文档编辑服务发送一个打开文档的请求。
4、文档编辑服务从文档存储服务下载相对应的文档，并将文档转换为Office Open XML格式。
5、准备就绪后，文档编辑服务会将转化后的文档传输到基于浏览器的文档编辑器。
6、提供编辑或者查看权限，对文档进行相应操作，执行保存

2.保存文件

1、用户在文档编辑器中编辑文件。
2、文档编辑器将更改发送给文档编辑服务。
3、用户关闭文档编辑器。
4、文档编辑服务监视到文档结束工作，并收集从文档编辑器发送到一个文档中的更改
5、执行回调保存接口
6、返回状态

3.协同编辑

1、用户1和用户2在文档编辑器中打开同一个文档，即打开文件时已使用一个相同的document.key
2、用户1对打开的文档进行更改。
3、文档编辑器将用户1所做的更改发送到文档编辑服务。
4、文档编辑服务将用户1所做的更改发送给用户2文档编辑器。
5、现在用户2可以看到这些变化。

四、使用

1. 构建文档服务器

这步一般是后端实现的，这里就列一些参考的文章

1.onlyoffice使用记录

onlyoffice连接mysql 2.onlyoffice去掉token验证 3.把各种功能按钮提出来。（保存、下载、打印…）
最后他的效果图如上。

2.demo运行时报错的解决（后端处理）

报错：文档安全令牌未正确形成
- 可能是JWT的原因，去掉验证就可以了？（如果要更安全的话可以自己加个Token?）
报错：下载失败
- 使用内部ip地址访问后端服务报错，修改/etc/onlyoffice/documentserver/default.json中配置
- 扩展使用localhost不能跳转至插件的问题，解决方案：使用nginx反向代理。

2.vue中连接&展示（demo)

创建一个vue2项目
public中的index.html的head里增加<script type='text/javascript' src='http://ip:port/web-apps/apps/api/documents/api.js'></script>
需要有一个线上文档的地址，才能用Onlyoffice打开。
新建一个组件在components目录下：vanOnkyOffice.vue

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

<script>
import { getFileType } from "@/utils/wayne";

export default {
  name: "VabOnlyOffice",
  props: {
    option: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      doctype: "",
      //参数说明
      parameters: {
        document: {
          //文件扩展名
          fileType: "docx",
          //key 默认置空则不走缓存 always update
          key: "",
          //为已查看或编辑的文档定义所需的文件名，该文件名在下载文档时也将用作文件名。
          title: "",
          //文件地址
          url: "",
          //相关权限
          permissions: {
            copy: true, //定义内容是否可以复制到剪贴板。如果该参数设置为false，则只能在当前文档编辑器中粘贴内容。默认值为true。
            download: true, //定义文档是可以下载还是只能在线查看或编辑。如果下载权限设置为“假”的下载为...菜单选项将是缺席的文件菜单。默认值为true。
            edit: true, //定义文档是可以编辑还是只能查看。如果编辑权限设置为“true”，则文件菜单将包含编辑文档菜单选项；请注意，如果编辑权限设置为“false”，文档将在查看器中打开，即使模式参数设置为edit，您也无法将其切换到编辑器。默认值为true。
            print: true, //定义是否可以打印文档。如果打印权限设置为“false”的打印菜单选项将是缺席的文件菜单。默认值为true
          },
        },
        //文件类型
        documentType: "text",
        height: "100%",
        width: "100%",
        editorConfig: {
          //语言：zh-CN简体中文/en英文
          lang: "en",
          //阅读状态 view/edit
          mode: "view",
          customization: {
            //是否显示插件
            plugins: false,
          },
        },
      },
    };
  },
  watch: {
    option: {
      handler: function (n) {
        this.setEditor(n);
        this.doctype = getFileType(n.fileType);
      },
      deep: true,
    },
  },
  mounted() {
    if (this.option.url) {
      this.setEditor(this.option);
    }
  },
  methods: {
    async setEditor(option) {
      this.doctype = getFileType(option.fileType);

      let config = {
        document: {
          //后缀
          fileType: option.fileType,
          key: "",
          title: option.title,
          permissions: {
            edit: option.isEdit, //是否可以编辑: 只能查看，传false
            print: option.isPrint,
            download: false,
            // "fillForms": true,//是否可以填写表格，如果将mode参数设置为edit，则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。
            // "review": true //跟踪变化
          },
          url: option.url,
        },
        documentType: this.doctype,
        editorConfig: {
          callbackUrl: option.editUrl, //"编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置
          lang: option.lang, //语言设置
          //定制
          customization: {
            autosave: false, //是否自动保存
            chat: false,
            comments: false,
            help: false,
            // "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false
            //是否显示插件
            plugins: true,
            //暂时无法生效
            customer: {
              address: "12333333333",
              info: "S11",
              logo: "123",
              mail: "j123",
              name: "123",
              www: "123",
            },
          },
        },
        width: "100%",
        height: "100%",
      };

      // eslint-disable-next-line no-undef,no-unused-vars
      new DocsAPI.DocEditor("vabOnlyOffice", config);
    },
  },
};
</script>

@/utils/wayne里的方法

export function getFileType(fileType) {
    let docType = ''
    let fileTypesDoc = [
      'doc', 'docm', 'docx', 'dot', 'dotm', 'dotx', 'epub', 'fodt', 'htm', 'html', 'mht', 'odt', 'ott', 'pdf', 'rtf', 'txt', 'djvu', 'xps',
    ]
    let fileTypesCsv = [
      'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx',
    ]
    let fileTypesPPt = [
      'fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx',
    ]
    if (fileTypesDoc.includes(fileType)) {
      docType = 'text'
    }
    if (fileTypesCsv.includes(fileType)) {
      docType = 'spreadsheet'
    }
    if (fileTypesPPt.includes(fileType)) {
      docType = 'presentation'
    }
    return docType
  }

在App.vue中调用这个组件：

<template>
  <div class="qualityManual-container">
    <div class="qualityManual-container-office">
      <vab-only-office :option="option" />
    </div>
  </div>
</template>

<script>
import vabOnlyOffice from "./components/vabOnlyOffice";

export default {
  name: "QualityManual",
  components: { vabOnlyOffice },

  data() {
    return {
      //参考vabOnlyOffice组件参数配置
      option: {
        url: "",
        isEdit: "",
        fileType: "",
        title: "",
        lang: "",
        isPrint: "",
      },
    };
  },
  methods: {
    getFile() {
      // getAction('/onlyfile/file/queryById', { id: this.id }).then(res => {
      this.option.isEdit = true;
      this.option.lang = "en";
      this.option.url ="http://xxx/xxxxxx.docx";
      this.option.title = "123";
      this.option.fileType = "docx";
      this.option.isPrint = false;
      // })
    },
  },
  mounted() {
    this.getFile();
  },
};
</script>

<style lang="scss" scoped>
.qualityManual-container {
  padding: 0 !important;

  &-office {
    width: 100%;
    height: 90vh;
  }
}
</style>

其实主要是使用了参考2里面的代码，留着备份一下。

五、参考

1.onlyoffice+vue实现在线预览在线编辑：包括onlyoffice介绍和前后端代码
2.Vue 预览word,excel,ppt等office文档-内网访问（基于onlyoffice，后端返回文件流）上面这篇的前端组件也是参考的这个文档里的。
3java+vue+onlyoffice的简单集成：代码不太全；提到集成插件（签章）是在部署docker的时候挂载？；从文档管理页跳转到详情页的写法。有包括后端的保存回调写法。
vue+onlyoffice实现编辑和预览有完整的使用代码，参考1里的代码是在这个基础上做整合的。
4.ONLYOFFICE的csdn：里面有些教程，不过首发应该还是它自己的官网？
5.【onlyoffice中文指南】12-问题及排除确实是比较常见的问题。
6. 史上最全在线编辑 onlyOffice 使用步骤还没看，好像还有后端的保存的写法。