预览

package.json

@@ -16,12 +16,16 @@
   "dependencies": {
     "@smallwei/avue": "^2.9.15",
     "@tinymce/tinymce-vue": "^3.0.1",
+    "@vue-office/docx": "^1.6.3",
+    "@vue-office/excel": "^1.7.14",
+    "@vue-office/pdf": "^2.0.10",
+    "@vue/composition-api": "^1.7.2",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^1.0.2",
     "af-table-column": "^1.0.3",
     "avue-plugin-map": "^1.0.1",
     "axios": "0.18.1",
-    "core-js": "3.6.5",
+    "core-js": "^3.6.5",
     "echarts": "^4.2.1",
     "element-ui": "2.15.13",
     "file-saver": "^2.0.5",

src/components/viewFile/viewFile.vue

@@ -1,26 +1,34 @@
-<template>
+<template>
-
 
-  <el-dialog class="common-dialog" :fullscreen='isfullscreen' :title="title" :modal="false" top="10vh" :visible.sync="diaShow" @close="coloseDia"
+
-    :width="width">
+  <el-dialog class="common-dialog" :fullscreen='isfullscreen' :title="title" :modal="false" top="2vh"
+    :visible.sync="diaShow" @close="coloseDia" :width="width">
     <div slot="title">
       <span class="el-dialog__title">{{title}}</span>
       <slot name="searchtype"></slot>
     </div>
 
-    <div class="dialogConcent" style="max-height: 65vh !important;min-height: 300px;overflow: scroll;">
+    <div class="dialogConcent" :style="{height:wheight+'px'}">
-      <div v-if="typeName=='file'">
+      <div v-if="typeName=='file'" style="height:100%;overflow: scroll;">
-        <iframe id="iframeWin" :src="url" frameborder="0" scrolling="auto" align="center" class="iframeWeb">
+        <vue-office-docx v-if="urlType==='docx'" :src="url" @rendered="renderingCompleted"></vue-office-docx>
-        </iframe>
+        <vue-office-pdf v-else-if="urlType==='pdf'" :src="url" @rendered="renderingCompleted"></vue-office-pdf>
+        <vue-office-excel v-else-if="urlType==='excel'" :src="url" @rendered="renderingCompleted"></vue-office-excel>
+
+        <img v-else-if="urlType==='image'"  :src="url" style="width:100%"></img>
+
+        <iframe v-else id="iframeWin" :src="url" frameborder="0" scrolling="auto" align="center" class="iframeWeb">
+        </iframe>
       </div>
-      <div v-if="typeName=='video'" style="text-align: center;">
+      <div v-if="typeName=='video'" style="text-align: center;">
-        <video :src="url" controls></video>
+        <video :src="url" controls></video>
       </div>
+
     </div>
 
-    <div slot="footer" class="dialog-footer">
+    <div slot="footer" class="dialog-footer">
-      <div>
+      <div>
-        <el-button size="small" @click="coloseDia">关闭</el-button>
+        <el-button size="small" @click="coloseDia">关闭</el-button>
+
       </div>
       <slot name="footerbtn"></slot>
     </div>
@@ -29,7 +37,16 @@
 </template>
 
 <script>
+  import vueOfficeDocx from "@vue-office/docx"
+  import vueOfficeExcel from "@vue-office/excel"
+  import vueOfficePdf from "@vue-office/pdf"
+  import '@vue-office/docx/lib/index.css'
   export default {
+    components: {
+      vueOfficeDocx,
+      vueOfficeExcel,
+      vueOfficePdf
+    },
     props: {
       title: {
         type: String,
@@ -37,7 +54,7 @@
       },
       width: {
         type: String,
-        default: "70%"
+        default: "60%"
       },
       isShow: {
         type: Boolean,
@@ -52,40 +69,72 @@
     },
     data() {
       return {
-        diaShow: this.isShow,
+        diaShow: this.isShow,
-        isfullscreen:false,
+        isfullscreen: false,
-        url:'',
-        typeName:'file',
         baseUrl: `${process.env.VUE_APP_PREVIEW_API}?url=`,
-        wheight: "",
+        url: '',
-        form:{
+        wheight: "400",
-          show:''
+        form: {
-        }
+          show: ''
+        },
+        urlType: 'others',
+        typeName: 'file',
       }
     },
     watch: {
       isShow(val) {
         this.diaShow = this.isShow;
-      },
+      },
+      url(val) {
+        console.log("url", val, this.typeName)
+        if (val) {
+          if (this.typeName === 'file') {
+            if (val.includes('docx') || val.includes('DOCX')) {
+              this.urlType = 'docx'
+            } else if (val.includes('pdf') || val.includes('PDF')) {
+              this.urlType = 'pdf'
+            } else if (val.includes('xls') || val.includes('xlsx') || val.includes('XLS') || val.includes('XLSX')) {
+              this.urlType = 'excel'
+            } else if (this.isImageUrl(val)) {
+              this.urlType = 'image'
+            } else {
+              this.urlType = 'others'
+            }
+          }
 
+          console.log('urltype', this.urlType)
+        }
+      }
     },
-    methods: {
+    methods: {
+      renderingCompleted() {
+        console.log("渲染完成")
+      },
+      isImageUrl(url) {
+        // 定义常见的图片格式扩展名
+        const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.tiff', '.tif', '.webp', '.svg'];
 
+        // 将 URL 转换为小写，方便匹配
+        const lowerCaseUrl = url.toLowerCase();
+
+        // 检查 URL 是否以图片扩展名结尾
+        return imageExtensions.some(ext => lowerCaseUrl.endsWith(ext));
+      },
       coloseDia() {
-        // this.url = ""
+        this.url = ""
-        this.diaShow = false
+        this.diaShow = false
-        this.url = ''
+        this.typeName = 'file'
-        this.typeName = 'file'
         this.$emit('update:isShow', false)
       }
     }
   }
 </script>
 
-<style scoped>
+<style scoped>
-  /deep/ .show{
+  /deep/ .show {
-    flex-basis: 100%;
+    flex-basis: 100%;
   }
+
   .dialogConcent {
     overflow-y: hidden;
   }

src/components/viewFile/viewFile2.vue

@@ -0,0 +1,100 @@
+<template>
+
+
+  <el-dialog class="common-dialog" :fullscreen='isfullscreen' :title="title" :modal="false" top="10vh" :visible.sync="diaShow" @close="coloseDia"
+    :width="width">
+    <div slot="title">
+      <span class="el-dialog__title">{{title}}</span>
+      <slot name="searchtype"></slot>
+    </div>
+
+    <div class="dialogConcent" style="max-height: 65vh !important;min-height: 300px;overflow: scroll;">
+      <div v-if="typeName=='file'">
+        <iframe id="iframeWin" :src="url" frameborder="0" scrolling="auto" align="center" class="iframeWeb">
+        </iframe>
+      </div>
+      <div v-if="typeName=='video'" style="text-align: center;">
+        <video :src="url" controls></video>
+      </div>
+    </div>
+
+    <div slot="footer" class="dialog-footer">
+      <div>
+        <el-button size="small" @click="coloseDia">关闭</el-button>
+      </div>
+      <slot name="footerbtn"></slot>
+    </div>
+  </el-dialog>
+
+</template>
+
+<script>
+  export default {
+    props: {
+      title: {
+        type: String,
+        default: "文件预览"
+      },
+      width: {
+        type: String,
+        default: "70%"
+      },
+      isShow: {
+        type: Boolean,
+        default: () => {
+          return false
+        }
+      },
+      type: {
+        type: String,
+        default: "showinfo"
+      },
+    },
+    data() {
+      return {
+        diaShow: this.isShow,
+        isfullscreen:false,
+        url:'',
+        typeName:'file',
+        baseUrl: `${process.env.VUE_APP_PREVIEW_API}?url=`,
+        wheight: "",
+        form:{
+          show:''
+        }
+      }
+    },
+    watch: {
+      isShow(val) {
+        this.diaShow = this.isShow;
+      },
+
+    },
+    methods: {
+
+      coloseDia() {
+        // this.url = ""
+        this.diaShow = false
+        this.url = ''
+        this.typeName = 'file'
+        this.$emit('update:isShow', false)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  /deep/ .show{
+    flex-basis: 100%;
+  }
+  .dialogConcent {
+    overflow-y: hidden;
+  }
+
+  .iframeWeb {
+    text-align: center;
+    border: none;
+    display: block;
+    height: 100vh;
+    width: 100%;
+  }
+</style>

src/views/record/components/showRecord.vue

@@ -87,7 +87,13 @@
           this.$refs.viewFile.url = item.url
         }else{
           this.$refs.viewFile.typeName = 'file'
-          this.$refs.viewFile.url = item.view_url
+          if(item.url.includes('doc')||item.url.includes('DOC')){
+
+            this.$refs.viewFile.url = item.view_url
+          }else{
+
+            this.$refs.viewFile.url = item.url
+          }
         }
         this.$refs.viewFile.diaShow = true
       },