onlyOffice应用

后端提供的外链地址+Vue本地应用

1.引入外链

将后端提供的外链地址src在项目的index.html文件中引入

<script type='text/javascript' :src='src'></script>

2.准备好onlyOffice的Vue组件文件

<!--onlyoffice 编辑器-->
<template>
  <div :id='id'></div>
</template>

<script>
  export default {
    name: 'OnlyOffice',
    props: {
      id: {
        type: String,
        default: 'OnlyOffice1'
      },
      option: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data () {
      return {
        doctype: '',
        docEditor: null
      }
    },
    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: {
      async 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, //是否可以编辑: 只能查看，传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: false
            },
            user: {
              id: option.user.id,
              name: option.user.name
            },
            mode: option.model?option.model:'edit'
          },
          width: '100%',
          height: '100%',
          token: option.token||''
        }

        // eslint-disable-next-line no-undef,no-unused-vars
        this.docEditor = new DocsAPI.DocEditor(this.id, config)

      },
      getFileType (fileType) {
        let docType = ''
        const fileTypesDoc = [
          'doc', 'docm', 'docx', 'dot', 'dotm', 'dotx', 'epub', 'fodt', 'htm', 'html', 'mht', 'odt', 'ott', 'pdf', 'rtf', 'txt', 'djvu', 'xps'
        ]
        const fileTypesCsv = [
          'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx'
        ]
        const 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>

3.在相应位置引入onlyOffice组件并应用如下

<template>
    <div>
        <OnlyOffice  :option="option" :id="`OnlyOffice1`"/>
    </div>
</template>

<script>

import OnlyOffice  from '@/views/client/common/only-office.vue'

export default {
  components: {
    OnlyOffice
  },
  data () {
    return{
      option: {
          url: '', // 文件路径
          isEdit: false,
          fileType: '', // 'doc' 文件类型必须小写
          title: '', // 文件名称
          lang:'zh-CN',  // 编辑器的语言
          isPrint: false,
          user: { id: null, name: '' } // 当前正在view/edit此文档的用户信息
      },
   }
 }
</script>

借鉴于: onlyoffice java开发教程 onlyoffice vue_mob6454cc743894的技术博客_51CTO博客