src/components/Onlyoffice/onlyoffice.vue
@@ -1,6 +1,15 @@
<!--onlyoffice 编辑器-->
<template>
  <div id="vabOnlyOffice"></div>
  <div class="document-preview">
    <iframe
      v-if="isPdf"
      :key="option.url"
      :src="option.url"
      class="native-pdf-preview"
      title="PDF预览"
    ></iframe>
    <div v-else id="vabOnlyOffice"></div>
  </div>
</template>
<script>
@@ -55,6 +64,11 @@
      }
    };
  },
  computed: {
    isPdf() {
      return this.isPdfFile(this.option);
    }
  },
  created() {
    if(this.options){
      const option = this.options
@@ -106,10 +120,12 @@
    },
    async setEditor(option) {
      this.destroyEditor();
      // 没有文档地址就不初始化编辑器,避免访问尚未加载的 DocsAPI
      if (!option || !option.url) {
      // PDF 使用浏览器原生预览;其他文档才初始化 OnlyOffice。
      if (!option || !option.url || this.isPdfFile(option)) {
        return;
      }
      // 等待 v-else 中的 OnlyOffice 容器完成渲染。
      await this.$nextTick();
      this.doctype = this.getFileType(option.fileType);
      let config = {
        document: {
@@ -162,6 +178,14 @@
        return;
      }
      this.docEditor = new window.DocsAPI.DocEditor("vabOnlyOffice", config);
    },
    isPdfFile(option) {
      if (!option) {
        return false;
      }
      const fileType = String(option.fileType || "").toLowerCase();
      const url = String(option.url || "").split(/[?#]/)[0].toLowerCase();
      return fileType === "pdf" || url.endsWith(".pdf");
    },
    getFileType(fileType) {
      let docType = "";
@@ -227,6 +251,16 @@
</script>
<style scoped>
.document-preview,
.native-pdf-preview,
#vabOnlyOffice {
  width: 100%;
  height: 100%;
}
.native-pdf-preview {
  display: block;
  border: 0;
}
html,
body {
  height: 100%;