Vue OnlyOffice 在线文档

1、在线文档引用

由后台人员搭建服务，引用api

2、封装组件

<!--
 * @Descripttion: 在线编辑插件
 * @version: 0.0.1
 * @Author: PengShuai
 * @Date: 2022-12-23 15:43:07
 * @LastEditors: PengShuai
 * @LastEditTime: 2023-02-22 10:17:11
 -->
<template>
  <div class="BaseOffice">
    <div id="psOffice"></div>
  </div>
</template>
 
<script>
export default {
  name: 'BaseOffice',
  data() {
    return {
      // 文档类型
      doctype: '',
      // 编辑状态
      docEditor: null,
    }
  },
  props: {
    // 传入配置
    option: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  beforeDestroy() {
    if (this.docEditor !== null) {
      this.docEditor.destroyEditor()
      this.docEditor = null
    }
  },
  watch: {
    option: {
      handler: function (n) {
        this.setEditor(n)
        this.doctype = this.getFileType(n.fileType)
      },
      deep: true,
    },
  },
  mounted() {
    if (this.option.url) {
      this.setEditor(this.option)
    }
  },
  methods: {
    setEditor(option) {
      if (this.docEditor !== null) {
        this.docEditor.destroyEditor()
        this.docEditor = null
      }
      this.doctype = this.getFileType(option.fileType)
      let config = {
        document: {
          fileType: option.fileType,
          key: option.key || '',
          title: option.title,
          permissions: {
            edit: option.isEdit,
            print: option.isPrint,
            modifyContentControl: true,
            download: true,
          },
          url: option.url,
        },
        documentType: this.doctype,
        editorConfig: {
          key: option.key || '',
          customization: {
            autosave: false, //自动保存
            forcesave: false,
            chat: false,
            comments: false,
          },
          callbackUrl: option.editUrl, //回调的地址
          lang: option.lang, //语言设置
          user: {
            id: option.user.id,
            name: option.user.name,
          },
          mode: option.model,
        },
        width: '100%',
        height: '100%',
        token: option.token,
      }
      this.docEditor = new DocsAPI.DocEditor('psOffice', config)
    },
    // 获取文件类型
    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
    },
  },
}
</script>
 
<style lang="less" scoped>
.BaseOffice {
  width: 100%;
  height: 100%;
}
</style>
 

3、引用组件

import BaseOffice from '@/components/BaseOffice'
 
components: { BaseOffice},
 
<base-office ref="BaseOffice" :option="officeOption"></base-office>
 

4、配置

 _this.officeOption = {
      url: '192.168.**.**/file/demo.doc', // 获取服务器文件
      isEdit: true, // 是否可编辑
      fileType: doc, // 文件类型
      title: '测试文档', // 文件名称
      lang: 'zh-CN', // 国际化
      isPrint: true, // 是否打印
      model: 'edit', // 模式
      key: _this.BaseUuid(), // 唯一键
      user: { id: userCode, name: userName }, // 用户信息
      editUrl: '192.168.**.**/file/demoSave', // 编辑接口 保存回调
      token: sessionStorage.getItem('token'),
    }

5、生成唯一键

参考 https://www.cnblogs.com/psmart/p/16371116.html

6、官网

https://www.onlyoffice.com/zh/

7、api

https://api.onlyoffice.com/
https://api.onlyoffice.com/editors/basic