预览

src/components/viewFile/viewFile.vue

@@ -8,11 +8,11 @@
       <slot name="searchtype"></slot>
     </div>
 
-    <div class="dialogConcent" :style="{height:wheight+'px'}">
-      <vue-office-docx v-if="urlType==='docx'"  :src="url" @rendered="renderingCompleted"></vue-office-docx>
-      <vue-office-pdf v-if="urlType==='pdf'"  :src="url" @rendered="renderingCompleted"></vue-office-pdf>
-      <vue-office-excel v-if="urlType==='excel'" :src="url" @rendered="renderingCompleted"></vue-office-excel>
-      <iframe v-else id="iframeWin" :src="baseUrl+url" frameborder="0" scrolling="auto" align="center" class="iframeWeb">
+    <div class="dialogConcent" :class="{'pdf-container': urlType==='pdf', 'excel-container': urlType==='excel'}" :style="{height:wheight+'px'}" v-loading="loading" element-loading-text="文件加载中...">
+      <vue-office-docx v-if="urlType==='docx' && url" :key="urlKey" :src="url" @rendered="renderingCompleted" @error="handleError"></vue-office-docx>
+      <vue-office-pdf v-if="urlType==='pdf' && url" :key="urlKey" :src="url" @rendered="renderingCompleted" @error="handleError"></vue-office-pdf>
+      <vue-office-excel v-if="urlType==='excel' && url" :key="urlKey" :src="url" @rendered="renderingCompleted" @error="handleError"></vue-office-excel>
+      <iframe v-if="urlType==='others' && url" :key="urlKey" id="iframeWin" :src="baseUrl+url" frameborder="0" scrolling="auto" align="center" class="iframeWeb" @load="iframeLoaded" @error="handleError">
       </iframe>
     </div>
 
@@ -71,7 +71,10 @@
         form:{
           show:''
         },
-        urlType:'others'
+        urlType:'others',
+        loading: false,
+        urlKey: 0, // 用于强制重新渲染组件
+        loadTimer: null // 加载超时定时器
       }
     },
     watch: {
@@ -81,6 +84,11 @@
       url(val){
         console.log("url",val)
         if(val){
+          // 启动加载
+          this.loading = true
+          // 强制重新渲染，确保每次打开都是新的加载
+          this.urlKey = Date.now()
+          
           if(val.includes('docx')||val.includes('DOCX')){
             this.urlType = 'docx'
           }else if(val.includes('pdf')||val.includes('PDF')){
@@ -91,15 +99,93 @@
             this.urlType = 'others'
           }
           console.log('urltype',this.urlType)
+          
+          // 设置超时处理，避免加载失败时一直显示 loading
+          // 清除之前的定时器
+          if(this.loadTimer) {
+            clearTimeout(this.loadTimer)
+          }
+          this.loadTimer = setTimeout(() => {
+            if(this.loading) {
+              console.warn('文件加载超时')
+              this.loading = false
+              this.$message.warning('文件加载超时，请检查网络或文件是否存在')
+            }
+          }, 30000) // 30秒超时
+        } else {
+          // url为空时重置文件类型
+          this.urlType = 'others'
+          this.loading = false
+        }
+      },
+      diaShow(val) {
+        // 对话框打开时，如果 url 存在，重新触发加载
+        if(val && this.url) {
+          this.urlKey = Date.now()
+          this.loading = true
+          // 设置超时处理
+          if(this.loadTimer) {
+            clearTimeout(this.loadTimer)
+          }
+          this.loadTimer = setTimeout(() => {
+            if(this.loading) {
+              console.warn('文件加载超时')
+              this.loading = false
+              this.$message.warning('文件加载超时，请检查网络或文件是否存在')
+            }
+          }, 30000)
+        }
+        // 对话框关闭时，重置状态
+        if(!val) {
+          if(this.loadTimer) {
+            clearTimeout(this.loadTimer)
+            this.loadTimer = null
+          }
+          this.loading = false
         }
       }
     },
     methods: {
       renderingCompleted(){
         console.log("渲染完成")
+        // 清除超时定时器
+        if(this.loadTimer) {
+          clearTimeout(this.loadTimer)
+          this.loadTimer = null
+        }
+        // 渲染完成后隐藏 loading
+        this.loading = false
+      },
+      iframeLoaded(){
+        console.log("iframe加载完成")
+        // 清除超时定时器
+        if(this.loadTimer) {
+          clearTimeout(this.loadTimer)
+          this.loadTimer = null
+        }
+        // iframe 加载完成后隐藏 loading
+        this.loading = false
+      },
+      handleError(error) {
+        console.error("文件加载失败:", error)
+        // 清除超时定时器
+        if(this.loadTimer) {
+          clearTimeout(this.loadTimer)
+          this.loadTimer = null
+        }
+        // 加载失败时也隐藏 loading
+        this.loading = false
+        this.$message.error('文件加载失败，请重试')
       },
       coloseDia() {
-        // this.url = ""
+        // 清除定时器
+        if(this.loadTimer) {
+          clearTimeout(this.loadTimer)
+          this.loadTimer = null
+        }
+        // 清除文件显示
+        this.urlType = 'others'
+        this.loading = false
         this.diaShow = false
         this.$emit('update:isShow', false)
         this.$emit('resetform')
@@ -114,6 +200,27 @@
   }
   .dialogConcent {
     overflow-y: hidden;
+    position: relative;
+  }
+
+  .dialogConcent.pdf-container {
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .dialogConcent.pdf-container /deep/ .vue-office-pdf {
+    width: 100%;
+    height: auto;
+  }
+
+  .dialogConcent.excel-container {
+    overflow-y: auto;
+    overflow-x: auto;
+  }
+
+  .dialogConcent.excel-container /deep/ .vue-office-excel {
+    width: 100%;
+    height: auto;
   }
 
   .iframeWeb {

vue.config.js

@@ -25,7 +25,7 @@ module.exports = {
    * Detail: https://cli.vuejs.org/config/#publicpath
    */
   publicPath: process.env.ENV === 'staging' ? '/admin_test' : '/admin',
-  outputDir: '/Users/mac/Documents/朗业/2024/h-河道处项目/a-安全生产/safety-manage-service/public/admin_test',
+  outputDir: '/Users/mac/Documents/朗业/2024/h-河道处项目/a-安全生产/safety-manage-service/public/admin',
   assetsDir: 'static',
   lintOnSave: process.env.NODE_ENV === 'development',
   productionSourceMap: false,