预览pdf文件

package.json

@@ -8,6 +8,7 @@
     "serve": "vite preview --port 3001"
   },
   "dependencies": {
+    "@js-preview/pdf": "^2.0.10",
     "@vant/touch-emulator": "^1.3.2",
     "axios": "^0.24.0",
     "js-base64": "^3.7.5",

src/router/index.js

@@ -56,6 +56,11 @@ const routes=[
     name: "reportshareExternal",
     component: () => import("@/views/report/reportExternalDetail.vue"),
   },
+  {
+    path: "/previewOfficeFile",
+    name: "PreviewOfficeFile",
+    component: () => import("@/views/previewOfficeFile.vue"),
+  },
 ]
 
 const router = createRouter({

src/views/previewOfficeFile.vue

@@ -0,0 +1,51 @@
+<script setup>
+import {onMounted,onBeforeUnmount} from 'vue'
+import jsPreviewPdf from "@js-preview/pdf";
+import { useRoute } from "vue-router";
+
+const route=useRoute()
+
+
+let myPdfPreviewer=null
+function handleRender(url){
+  myPdfPreviewer = jsPreviewPdf.init(document.getElementById('render-wrap'), {
+    onError: (e)=>{
+        console.log('发生错误', e)
+    },
+    onRendered: ()=>{
+        console.log('渲染完成')
+    }
+  });
+  myPdfPreviewer.preview(url);
+}
+
+onMounted(() => {
+  const url=decodeURIComponent(route.query.file)
+  handleRender(url)
+})
+
+onBeforeUnmount(() => {
+  myPdfPreviewer.destroy()
+})
+
+</script>
+
+<template>
+  <div class="preview-office-file-page">
+    <div class="render-wrap" id="render-wrap"></div>
+  </div>
+</template>
+
+
+<style lang="scss" scoped>
+.preview-office-file-page{
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  .render-wrap{
+    max-width: 1200px;
+    height: 100%;
+    margin: 0 auto;
+  }
+}
+</style>

src/views/report/reportExternalDetail.vue

@@ -263,13 +263,19 @@ export default {
 
     handlePreviewAttachment(row) {
         // // 预览文件
-        let href;
         if(row.Url.endsWith('.doc') || row.Url.endsWith('.docx')||row.Url.endsWith('.xlsx')){
-            href = 'https://view.officeapps.live.com/op/view.aspx?src='+row.Url
+          const href = 'https://view.officeapps.live.com/op/view.aspx?src='+row.Url
+          window.open(href, "_blank")
+        }else if(row.Url.endsWith('.pdf')){
+          // href=row.Url
+          let { href } = this.$router.resolve({
+            path: "/previewOfficeFile",
+            query: { file: encodeURIComponent(row.Url)},
+          });
+          window.open(href, "_blank");
         }else{
-            href=row.Url
+          window.open(row.Url, "_blank");
         }
-        window.open(href, "_blank")
     },
 
     formatSize(size) {