pptx文件预览

src/config/router.config.js

@@ -544,6 +544,18 @@ export const asyncRouterMap = [
           },
         ],
       },
+      {
+        path: '/document/dashboard',
+        name: 'DocumentDashboard',
+        component: RouteView,
+        meta: {
+          title: 'menu.document',
+          keepAlive: true,
+          icon: document,
+          permission: ['Document','DocumentDashboard'],
+        },
+        component: () => import('@/views/document/dashboard'),
+      },
       {
         path: '/document',
         name: 'document',
@@ -554,17 +566,8 @@ export const asyncRouterMap = [
           icon: document,
           permission: ['Document'],
         },
+        hidden: true,
         children: [
-          {
-            path: '/document/dashboard',
-            name: 'DocumentDashboard',
-            component: () => import('@/views/document/dashboard'),
-            meta: {
-              title: 'menu.document-dashboard',
-              keepAlive: true,
-              permission: ['DocumentDashboard'],
-            },
-          },
           {
             path: '/document/containerDetails',
             name: 'ContainerDetails',
@@ -859,6 +862,16 @@ export const asyncRouterMap = [
       icon: dashboard,
     },
   },
+  {
+    path: '/Preview',
+    name: 'Preview',
+    component: () => import('@/views/preview/Preview.vue'),
+    meta: { 
+      title: 'menu.model-preView',
+      keepAlive: false,
+      icon: dashboard,
+    },
+  },
   {
     path: '/Approval/Edit',
     name: 'ApprovalEdit',

src/views/document/comp/previewFile.vue

@@ -1,35 +1,12 @@
 <template>
   <span @click.stop="preView(info)">
     <a-icon type="file-search" />
-    <slot/>
-    <a-modal
-      v-model="previewVisible"
-      :title="$t('doc.Preview')"
-      :width="850"
-      :maskClosable="false"
-      :okButtonProps="{ style: { display: 'none' } }"
-      :cancelButtonProps="{ style: { display: 'none' } }"
-    >
-      <img :src="previewSrc" alt="" style="width: 100%" v-if="previewType === 'img'" />
-      <video controls :src="previewSrc" width="100%" v-if="previewType === 'mp4'"></video>
-      <VueOfficeDocx :src="previewSrc" style="height: 100vh" v-if="previewType === 'docx'" />
-      <VueOfficeExcel
-        :src="previewSrc"
-        :options="xlslOptions"
-        style="height: 100vh"
-        v-if="previewType === 'xlsx' || previewType === 'xls'"
-      />
-      <iframe :src="previewSrc" width="100%" height="800px" frameborder="1" v-if="previewType === 'pdf'"></iframe>
-    </a-modal>
+    <slot />
   </span>
 </template>
 
 <script>
 import { fileBimView } from '@/api/document/index.js'
-import VueOfficeDocx from '@vue-office/docx'
-import VueOfficeExcel from '@vue-office/excel'
-import '@vue-office/docx/lib/index.css'
-import '@vue-office/excel/lib/index.css'
 
 export default {
   name: 'previewFile',
@@ -38,55 +15,29 @@ export default {
       type: Object,
     },
   },
-  components: {
-    VueOfficeDocx,
-    VueOfficeExcel,
-  },
   data() {
-    return {
-      previewVisible: false,
-      previewSrc: '',
-      previewType: null,
-      xlslOptions: {
-        xls: false, //预览xlsx文件设为false；预览xls文件设为true
-        minColLength: 0,
-        minRowLength: 0,
-        widthOffset: 10,
-        heightOffset: 10,
-      },
-    }
+    return {}
   },
-  created() {},
   methods: {
     async preView(record) {
-      if (record.extension === 'pdf' || record.extension === 'docx' || record.extension === 'mp4') {
-        this.previewClick(record.download_url, record.extension)
-      } else if (['jpg', 'png', 'gif', 'jpeg'].includes(record.extension)) {
-        this.previewClick(record.download_url, 'img')
-      } else if (record.extension === 'xlsx' || record.extension === 'xls') {
-        this.xlslOptions.xls = record.extension === 'xlsx' ? false : true
-        this.previewClick(record.download_url, record.extension)
+      if (record.extension === 'pdf') {
+        window.open(record.download_url)
       } else if (record.model_preview) {
         let {
           data: { bim_view },
         } = await fileBimView(record.id)
         localStorage.setItem(bim_view.lightweightName, JSON.stringify([bim_view]))
         window.open(`/modelView?id=${bim_view.lightweightName}`, '_blank')
-      }
-    },
-    previewClick(val, type) {
-      if (type === 'pdf') {
-        const a = document.createElement('a')
-        a.href = val
-        a.target = '_blank'
-        a.style.display = 'none'
-        document.body.appendChild(a)
-        a.click() // 点击下载
-        document.body.removeChild(a) // 下载完成移除元素
       } else {
-        this.previewSrc = val
-        this.previewVisible = true
-        this.previewType = type
+        const { href } = this.$router.resolve({
+          path: '/Preview',
+          query: {
+            id: record.id,
+            extension: record.extension,
+            download_url: record.download_url,
+          },
+        })
+        window.open(href, '_blank')
       }
     },
   },

src/views/document/dashboard.vue

@@ -1739,7 +1739,7 @@ export default {
 
       docName: '',
 
-      preViewArr: ['xlsx', 'docx', 'pdf', 'jpg', 'png', 'gif', 'jpeg', 'xls', 'mp4'],
+      preViewArr: ['xlsx', 'docx', 'pdf', 'jpg', 'png', 'gif', 'jpeg', 'xls', 'mp4','pptx'],
       expandedAssetKeys: [],
       expandedProjectKeys: [],
       expandedCustomKeys: [],

src/views/preview/Preview.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="content">
+    <img
+      :src="download_url"
+      alt=""
+      class="posCenter"
+      style="width: 80%"
+      v-if="['jpg', 'png', 'gif', 'jpeg'].includes(extension)"
+    />
+    <video controls :src="download_url" width="80%" class="posCenter" v-if="extension === 'mp4'"></video>
+    <VueOfficeDocx :src="download_url" style="height: 100vh" v-if="extension === 'docx'" />
+    <VueOfficeExcel
+      :src="download_url"
+      :options="xlslOptions"
+      style="height: 100vh"
+      v-if="extension === 'xlsx' || extension === 'xls'"
+    />
+    <a-spin :spinning="spinning">
+      <div ref="pptx-wrapper" v-if="1"></div>
+      <a-empty v-else/>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import { init } from 'pptx-preview'
+import VueOfficeDocx from '@vue-office/docx'
+import VueOfficeExcel from '@vue-office/excel'
+import '@vue-office/docx/lib/index.css'
+import '@vue-office/excel/lib/index.css'
+
+export default {
+  name: 'previewFile',
+  components: {
+    VueOfficeDocx,
+    VueOfficeExcel,
+  },
+  data() {
+    return {
+      id: this.$route.query.id,
+      extension: this.$route.query.extension,
+      download_url: this.$route.query.download_url,
+
+      spinning:false,
+      xlslOptions: {
+        xls: false, //预览xlsx文件设为false；预览xls文件设为true
+        minColLength: 0,
+        minRowLength: 0,
+        widthOffset: 10,
+        heightOffset: 10,
+      },
+    }
+  },
+  mounted() {
+    this.loadPPT()
+  },
+  methods: {
+    loadPPT() {
+      if (this.extension !== 'pptx') {
+        return
+      }
+      this.spinning = true
+      this.$nextTick(() => {
+        this.pptxPrviewer = init(this.$refs['pptx-wrapper'], {
+          width: 1000,
+          height: document.body.clientHeight -10,
+        })
+        fetch(this.download_url)
+          .then((response) => {
+            return response.arrayBuffer()
+          })
+          .then((res) => {
+            this.pptxPrviewer.preview(res)
+            this.spinning = false
+          })
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.content {
+  height: 100%;
+  width: 100%;
+  background-color: rgb(50, 54, 57);
+  position: relative;
+}
+.posCenter {
+  position: absolute;
+  margin: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+/deep/.pptx-preview-wrapper {
+  padding-right: 5px;
+  overflow-x: hidden;
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    cursor: pointer;
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: #5353536f;
+    &:hover{
+      background: #535353;
+    }
+  }
+  &::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    background: #ededed;
+  }
+}
+</style>