✨新增pdf预览器

src/components/ShowFile/ShowFile.vue

@@ -3156,7 +3156,7 @@ export default {
           this.openCompressionVisible = true
           return
         }
-        if (row.contentType.indexOf('office') > -1 || row.suffix === 'csv') {
+        if (row.contentType.indexOf('office') > -1 || row.suffix === 'csv' || row.suffix === 'pdf') {
           // office文件
           this.officePreviewVisible = true
           this.officePreviewRow = row
@@ -3165,7 +3165,6 @@ export default {
         if (row.suffix === 'pdf') {
           // pdf文件
           fileConfig.preview(this.$store.state.user.name, row, this.$store.getters.token)
-          this.closeNotPreviewDialogVisible()
           return
         }
         this.notPreviewDialogVisible = true

src/components/office/OnlyOfficeEditor.vue

@@ -21,6 +21,10 @@ export default {
         return "office_" + Math.round(Math.random() * 10000)
       }
     },
+    fileUrl: {
+      type: String,
+      default: ''
+    },
     code: {
       type: String,
       default: ''
@@ -111,17 +115,13 @@ export default {
       }
       let fileKey = `${new Date(this.file.updateDate).getTime()}-${this.file.id}`
 
-      let url = window.location.origin + fileConfig.previewUrl(this.$store.state.user.name, this.file, this.$store.getters.token)
-      if(this.readOnly){
-        url = window.location.origin + fileConfig.publicPreviewUrl(this.file.id, window.shareId);
-      }
       let callbackUrl = fileConfig.officeCallBackUrl(this.$store.getters.token, this.file.id)
       const config = {
         "document": {
           "fileType": this.fileType,
           "key": fileKey,
           "title": this.file.name,
-          "url": url,
+          "url": this.fileUrl,
         },
         "editorConfig": {
           "mode": "edit",

src/components/office/PdfPreview.vue

@@ -0,0 +1,74 @@
+<template>
+  <di>
+    <div class="pdf-office">
+      <iframe ref="pdfIframe" :title="file.name" :src="fileUrl" width="100%" height="100%" align="top" frameborder="0"
+              name="PDF Preview"></iframe>
+    </div>
+  </di>
+</template>
+
+<script>
+
+export default {
+  name: "PdfPreview",
+  props: {
+    id: {
+      type: String,
+      default: () => {
+        return "office_" + Math.round(Math.random() * 10000)
+      }
+    },
+    fileUrl: {
+      type: String,
+      default: ''
+    },
+    file: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+    this.iframeLoad();
+  },
+  methods: {
+    iframeLoad() {
+      console.log('loading')
+      const iframe = this.$refs.pdfIframe;
+      if (iframe.attachEvent) {
+        // IE
+        iframe.attachEvent('onload', () => {
+          this.$emit('onReady')
+        });
+      } else {
+        // 非IE
+        iframe.onload = () => {
+          this.$emit('onReady')
+        };
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.pdf-office {
+  position: absolute;
+  top: 2.5rem;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+</style>

src/components/preview/OfficePreview.vue

@@ -16,7 +16,8 @@
             <svg-icon class="preview-close" icon-class="close"/>
           </div>
           <div class="wrapper">
-            <only-office-editor ref="officeEditor" :file="file" :read-only="readOnly" @onEdit="onEdit" @manualSave="manualSave" @onClose="close" @onReady="onReady"></only-office-editor>
+            <pdf-preview v-if="fileType === 'pdf'" :file="file" :file-url="fileUrl" @onReady="onReady"></pdf-preview>
+            <only-office-editor ref="officeEditor" v-else :file="file" :file-url="fileUrl" :read-only="readOnly" @onEdit="onEdit" @manualSave="manualSave" @onClose="close" @onReady="onReady"></only-office-editor>
           </div>
         </div>
     </div>
@@ -28,10 +29,12 @@
 import OnlyOfficeEditor from "@/components/office/OnlyOfficeEditor";
 import MessageDialog from "@/components/message/MessageDialog";
 import Bus from "@/assets/js/bus";
+import fileConfig from "@/utils/file-config";
+import PdfPreview from "@/components/office/PdfPreview";
 
 export default {
   name: 'OfficePreview',
-  components: {MessageDialog, OnlyOfficeEditor},
+  components: {PdfPreview, MessageDialog, OnlyOfficeEditor},
   props: {
     id: {
       type: String,
@@ -56,6 +59,7 @@ export default {
   },
   data() {
     return {
+      fileUrl: '',
       pc: this.$pc,
       show: this.status,
       readyShow: false,
@@ -63,8 +67,14 @@ export default {
       isSaveDialogVisible: false,
       saved: true,
       previewDocument: {},
+      delayClosing: {}
     }
   },
+  computed: {
+    fileType() {
+      return this.getType(this.file.suffix)
+    },
+  },
   watch: {
     status: function(visible){
       if(visible){
@@ -73,9 +83,12 @@ export default {
           this.previewDocument = document.querySelector('.preview-block')
         })
         this.checkReadOnly(this.file.userId)
+        if (this.file.suffix === 'pdf') {
+          this.readyShow = true
+        }
         // 3秒后还没加载出来视为加载失败
         let that = this
-        setTimeout(function () {
+        this.delayClosing = setTimeout(function () {
           if (!that.readyShow) {
             that.readyShow = true
             Bus.$emit('loadFileFaild')
@@ -85,6 +98,14 @@ export default {
     }
   },
   methods: {
+    getType(suffix) {
+      switch (suffix) {
+        case 'pdf':
+          return 'pdf'
+        default:
+          return 'office'
+      }
+    },
     /**
      * 点击关闭按钮
      */
@@ -99,6 +120,7 @@ export default {
      * 执行关闭预览窗口
      */
     close() {
+      clearTimeout(this.delayClosing)
       this.show = false
       this.readyShow = false
       this.$emit('update:status', false)
@@ -108,14 +130,16 @@ export default {
      */
     onReady() {
       this.saved = true
-      this.previewDocument.style.zIndex = 9999
-      this.readyShow = true
-      this.$nextTick(() => {
-        let that = this
-        setTimeout(function () {
-          that.previewDocument.style.zIndex = 2001
-        },200)
-      })
+      if (this.fileType === 'office') {
+        this.previewDocument.style.zIndex = 9999
+        this.readyShow = true
+        this.$nextTick(() => {
+          let that = this
+          setTimeout(function () {
+            that.previewDocument.style.zIndex = 2001
+          },200)
+        })
+      }
     },
     /**
      * 编辑回调
@@ -171,6 +195,10 @@ export default {
           closeBar.style.transform = 'rotate(225deg)'
         })
       }
+      this.fileUrl = window.location.origin + fileConfig.previewUrl(this.$store.state.user.name, this.file, this.$store.getters.token)
+      if(this.readOnly){
+        this.fileUrl = window.location.origin + fileConfig.publicPreviewUrl(this.file.id, window.shareId);
+      }
     },
   }
 }