在线阅览文档

插件代码：

<template>
  <div class="onlyoffice" :id="id"></div>
</template>

<script>
export default {
     
  name: "onlyoffice",
  props: ["id", "userConfig", "config"],
  data: function() {
     
    return {
     
      docKey: new Date().getTime() + "",
      documentType: {
     
        doc: "text",
        docx: "text",
        pdf: "text",
        xls: "spreadsheet",
        xlsx: "spreadsheet",
        ppt: "presentation",
        pptx: "presentation"
      }
    };
  },
  computed: {
     
    fileType: function() {
     
      let _self = this;
      // console.log(_self.userConfig)
      let aaa = _self.userConfig.docname;
      console.log(aaa);
      // _self.userConfig.docname = '2222.docx'
      let index = _self.userConfig.docname.indexOf(".");
      return _self.userConfig.docname.substr(index + 1);
    }
  },
  mounted: function() {
     
    let _self = this;
    // console.log(_self.userConfig)
    console.log("mounted");
    // _self.getFileType()
    if (!_self.validateProps()) return;
    _self.createOnlyoffice();
  },
  methods: {
     
    validateProps: function() {
     
      let _self = this;
      if (!_self.id) {
     
        _self.$alert("id未配置", "onlyoffice组件调用出错");
        return false;
      }
      if (!_self.config) {
     
        _self.$alert("config未配置", "onlyoffice组件调用出错");
        return false;
      }
      if (!Object.keys(_self.documentType).includes(_self.fileType)) {
     
        _self.$alert(
          `${
       _self.userConfig.docname} 不支持的文件类型`,
          "onlyoffice组件调用出错"
        );
        return false;
      }
      return true;
    },
    createOnlyoffice: function() {
     
      let _self = this;
      const s = document.createElement("script");
      s.src = `http://${
       _self.$globalVars.JSSERVER}/web-apps/apps/api/documents/api.js`;
      s.onload = function() {
     
        const config = {
     
          document: {
     
            fileType: _self.fileType,
            key: _self.docKey,
            title: _self.userConfig.downname,
            // 'url': `http://${_self.$globalVars.FILESERVER}/documentFiles/${_self.userConfig.docname}`
            url: `http://${
       _self.$globalVars.FILESERVER}/uploadedfile/${
       _self.userConfig.busitype}/${
       _self.userConfig.docname}`
          },
          documentType: _self.documentType[_self.fileType],
          editorConfig: {
     
            customization: {
     
              autosave: false,
              forcesave: true
            },
            lang: "zh",
            mode: _self.config.mode === "view" ? "view" : "edit",
            // 'mode': 'view'
            // 'callbackUrl': `http://${_self.$globalVars.APISERVER}/document/savedocument?fileName=${_self.userConfig.docname}`
            callbackUrl: `http://${
       _self.$globalVars.FILESERVER}/Boflow/savedocument?fileName=${
       _self.userConfig.docname}&busitype=${
       _self.userConfig.busitype}`
          }
        };
        console.log(config);
        let docEditor = new DocsAPI.DocEditor(_self.id, config); // eslint-disable-line
        // console.log(docEditor)
      };
      document.body.appendChild(s);
    }
  }
};
</script>

html：

<!-- 查看正文 -->
    <el-dialog title="正文" :visible.sync="fileDialogVisible" width="80%">
      <div style="height:400px">
        <onlyoffice id="placeholder" :config="config" :userConfig="userConfig"></onlyoffice>
      </div>
    </el-dialog>

data：

 config: {
     
        mode: "view" // 文档打开方式，值为'view'时为只读的浏览模式, 不传或其他值都为编辑模式
      },
      userConfig: {
     
        busiid: "",
        busitype: "incomingDocument",
        doctype: "",
        downname: "",
        docname: ""
      }

js：
import onlyoffice from “@/components/onlyoffice/onlyoffice.vue”;

components: {
onlyoffice
},