perf:pdf预览器

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jmal-cloud-view",
-  "version": "2.2.40",
+  "version": "2.2.41",
   "description": "jmalcloud",
   "author": "Jmal <zhushilun084@163.com>",
   "license": "MIT",

src/components/ShowFile/ShowFile.vue

@@ -3162,11 +3162,6 @@ export default {
           this.officePreviewRow = row
           return
         }
-        if (row.suffix === 'pdf') {
-          // pdf文件
-          fileConfig.preview(this.$store.state.user.name, row, this.$store.getters.token)
-          return
-        }
         this.notPreviewDialogVisible = true
       }
     },

src/components/office/PdfPreview.vue

@@ -1,10 +1,9 @@
 <template>
-  <di>
+  <div>
     <div class="pdf-office">
-      <iframe ref="pdfIframe" :title="file.name" :src="fileUrl" width="100%" height="100%" align="top" frameborder="0"
-              name="PDF Preview"></iframe>
+      <iframe ref="pdfIframe" name="PDF Preview" :title="file.name" :src="fileUrl"></iframe>
     </div>
-  </di>
+  </div>
 </template>
 
 <script>
@@ -37,17 +36,17 @@ export default {
   },
   methods: {
     iframeLoad() {
-      console.log('loading')
       const iframe = this.$refs.pdfIframe;
+      const that = this
       if (iframe.attachEvent) {
         // IE
         iframe.attachEvent('onload', () => {
-          this.$emit('onReady')
+          that.$emit('onReady')
         });
       } else {
         // 非IE
         iframe.onload = () => {
-          this.$emit('onReady')
+          that.$emit('onReady')
         };
       }
     }
@@ -70,5 +69,10 @@ export default {
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
 }
 </style>

src/components/preview/OfficePreview.vue

@@ -75,6 +75,17 @@ export default {
       return this.getType(this.file.suffix)
     },
   },
+  mounted() {
+    let that = this;
+    this.$nextTick(function () {
+      document.addEventListener('keyup', function (e) {
+        // 监听ESC键
+        if (e.code === 'Escape') {
+          that.beforeClose()
+        }
+      }, false)
+    })
+  },
   watch: {
     status: function(visible){
       if(visible){
@@ -83,9 +94,6 @@ 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
         this.delayClosing = setTimeout(function () {
@@ -129,10 +137,11 @@ export default {
      * 文件内容已经加载好了
      */
     onReady() {
+      console.log('onReady')
       this.saved = true
+      this.readyShow = true
       if (this.fileType === 'office') {
         this.previewDocument.style.zIndex = 9999
-        this.readyShow = true
         this.$nextTick(() => {
           let that = this
           setTimeout(function () {
@@ -146,7 +155,6 @@ export default {
      * @param saved 是否已经保存
      */
     onEdit(saved) {
-      console.log('onEdit', saved)
       this.saved = saved
       if(saved){
         window.onbeforeunload = function(e){
@@ -168,7 +176,6 @@ export default {
      */
     saveAndClose() {
       // 通知插件保存
-      console.log('saveAndClose')
       Bus.$emit('previewSaveAndClose')
       this.isSaveDialogVisible = false
     },
@@ -186,7 +193,7 @@ export default {
       if(this.$store.state.user.token && this.$store.state.user.userId === fileUserId){
         this.readOnly = false
       }
-      if (!this.$pc) {
+      if (!this.$pc && this.fileType === 'office') {
         this.readOnly = true
         this.$nextTick(() => {
           const closeBar = document.querySelector('.office-preview .close-bar');

src/utils/file-config.js

@@ -17,16 +17,11 @@ export default {
   },
   // 预览文件的url
   previewUrl: function(username, file, token) {
-    let path = "/"
-    if (file.path.length > 1) {
-      path = encodeURI(file.path.substr(1, file.path.length - 2))
-    }
-    const filename = encodeURI(file.name);
+    let fileUrl = `${this.baseUrl}/file/${username}${encodeURI(file.path)}${encodeURI(file.name)}`
     if (token) {
-      return `${this.baseUrl}/file/${username}/${path}/${filename}?jmal-token=${token}`
-    } else {
-      return `${this.baseUrl}/file/${username}/${path}/${filename}`
+      return `${fileUrl}?jmal-token=${token}`
     }
+    return fileUrl
   },
   // mardown里上传图片后的图片预览地址
   mardownPreviewUrl: function (path){
@@ -40,7 +35,7 @@ export default {
   // 下载文件
   download: function(username, file, token) {
     fileApi.isAllowDownload().then(() => {
-      let url = `${this.baseUrl}/file/${username}${encodeURI(file.path)}${encodeURI(file.name)}?jmal-token=${token}&o=download`
+      let url = this.previewUrl(username, file, token) + '&o=download'
       window.open(url, '_self')
     })
   },