有網(wǎng)情況下可以直接調(diào)用微軟api：http://view.officeapps.live.com/op/view.aspx?src=需要編輯的文檔地址

在沒有聯(lián)網(wǎng)情況下使用OnlyOffice：
參考地址：https://www.cnblogs.com/ken-lk/p/14759916.html
官網(wǎng)地址：https://helpcenter.onlyoffice.com/installation/docs-community-install-docker.aspx
前端api地址：https://api.onlyoffice.com/editors/advanced

1塌衰、在index.html中引入api.js：

// 此js文件要放入服務(wù)端 需要后端配合
<script type="text/javascript" src="http://onlyoffice服務(wù)地址/web-apps/apps/api/documents/api.js"></script>

2癣朗、vue頁面中：

<template>
  <div id="monitorOffice" style="height: 100%;"></div>
</template>
<script>
import { handleDocType } from '@/utils/constants'
export default {
  data() {
    return {
      doctype: '',
      option: {
        url: '', // 要編輯或預(yù)覽的文檔地址
        fileType: 'xlsx', // 文件類型
        key: 'Khirz6zTP22df2', // 隨機(jī)不同的字符串
        title: '測試內(nèi)容編輯', 
        isEdit: true, // true為編輯 false為預(yù)覽
        editUrl: '', // 文檔修改后保存的地址
      }
    }
  },
  mounted() {
    if (this.$route.query.url) {
      this.setEditor(this.$route.query)
    }else{
      this.setEditor(this.option)
    }
  },
  methods: {
    setEditor(option) {
      this.doctype = handleDocType(option.fileType)
      // office配置參數(shù)
      let config = {
        document: {
          fileType: option.fileType,
          key: option.key,
          title: option.title,
          permissions: {
            comment: false,
            download: false,
            modifyContentControl: true,
            modifyFilter: true,
            print: false,
            edit: option.isEdit//是否可以編輯: 只能查看祈纯，傳false
            // "fillForms": true,//是否可以填寫表格急鳄，如果將mode參數(shù)設(shè)置為edit购披，則填寫表單僅對文檔編輯器可用掩蛤。 默認(rèn)值與edit或review參數(shù)的值一致亮蒋。
            // "review": true //跟蹤變化
          },
          url: option.url
        },

        documentType: this.doctype,
        editorConfig: {
          callbackUrl: option.editUrl,//"編輯word后保存時回調(diào)的地址献幔，這個api需要自己寫了煮寡，將編輯后的文件通過這個api保存到自己想要的位置
          //語言設(shè)置
          lang: 'zh-CN',
          location: 'zh-CN',
          customization: {
            autosave: false,//是否自動保存
            chat: false,
            forcesave: true,// true 表示強(qiáng)制文件保存請求添加到回調(diào)處理程序
            feedback: {
              visible: false // 隱藏反饋按鈕
            },
            comments: false,
            help: false,
            hideRightMenu: true,//定義在第一次加載時是顯示還是隱藏右側(cè)菜單虹蓄。 默認(rèn)值為false
            logo: {
              image: 'https://file.iviewui.com/icon/viewlogo.png',
              imageEmbedded: 'https://file.iviewui.com/icon/viewlogo.png'
            },
            spellcheck: false//拼寫檢查
          }
        },
        width: '100%',
        height: '100%'
      }
      let docEditor = new DocsAPI.DocEditor('monitorOffice', config)
      console.log(docEditor)
    }
  },
  watch: {
    option: {
      handler: function(n, o) {
        this.setEditor(n)
        this.doctype = handleDocType(n.fileType)
      },
      deep: true
    }
  }
}
</script>

3、引入的方法

export function handleDocType(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;
  }