预览

package.json

@@ -16,6 +16,9 @@
   "dependencies": {
     "@riophae/vue-treeselect": "^0.4.0",
     "@smallwei/avue": "^2.10.17",
+    "@vue-office/docx": "^1.6.3",
+    "@vue-office/excel": "^1.7.14",
+    "@vue-office/pdf": "^2.0.10",
     "avue-plugin-map": "^1.0.1",
     "axios": "^0.26.1",
     "core-js": "3.6.5",

src/components/viewFile/viewFile.vue

@@ -8,8 +8,11 @@
       <slot name="searchtype"></slot>
     </div>
 
-    <div class="dialogConcent" :style="{height:wheight+'px'}">
+    <div class="dialogConcent" :style="{height:wheight+'px'}">
-      <iframe id="iframeWin" :src="baseUrl+url" frameborder="0" scrolling="auto" align="center" class="iframeWeb">
+      <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">
       </iframe>
     </div>
 
@@ -24,8 +27,17 @@
 
 </template>
 
-<script>
+<script>
-  export default {
+  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,
@@ -44,32 +56,51 @@
       type: {
         type: String,
         default: "showinfo"
-      },
+      },
+      url:{
+        type: String,
+        default: ""
+      }
     },
     data() {
       return {
         diaShow: this.isShow,
-        isfullscreen:false,
+        isfullscreen:false,
-        url:'',
         baseUrl: "http://192.168.60.24:8012/onlinePreview?url=",
-        wheight: "",
+        wheight: "400",
         form:{
           show:''
-        }
+        },
+        urlType:'others'
       }
     },
     watch: {
       isShow(val) {
         this.diaShow = this.isShow;
       },
-
+      url(val){
+        console.log("url",val)
+        if(val){
+          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{
+            this.urlType = 'others'
+          }
+          console.log('urltype',this.urlType)
+        }
+      }
     },
     methods: {
-
+      renderingCompleted(){
+        console.log("渲染完成")
+      },
       coloseDia() {
         // this.url = ""
         this.diaShow = false
-        this.url = ''
         this.$emit('update:isShow', false)
         this.$emit('resetform')
       }

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,