预览pdf页面

package.json

@@ -18,6 +18,7 @@
     "normalize.css": "^8.0.1",
     "vconsole": "^3.14.6",
     "vue": "^3.2.25",
+    "vue-pdf-embed": "^1.1.6",
     "vue-router": "^4.0.12",
     "vuedraggable": "^4.1.0",
     "vuex": "^4.0.2"

src/router/index.js

@@ -183,6 +183,17 @@ const routes=[
           hasBack:true
         },
       },
+      {
+        path: "previewPDF",
+        name: "PreviewPDF",
+        component: () => import("@/views/report/PreviewPDF.vue"),
+        meta: {
+          title: "预览报告",
+          keepAlive:true,
+          isRoot:false,
+          hasBack:true
+        },
+      }
     ]
   },
   {

src/views/report/PreviewPDF.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import { reactive, onMounted} from "vue";
+import VuePdfEmbed from "vue-pdf-embed";
+const route = useRoute();
+
+const pdfSrc = route.query.pdfSrc ||'https://hzstatic.hzinsights.com/static/yb/pdf/debug/AoCnwUM9cUvnSeHwpz0bUNOJ7JA4.pdf'
+const pdfState = reactive({
+    source:pdfSrc,
+    pageNum:1,
+    scale:1,
+    numPages:0
+})
+</script>
+
+<template>
+    <div class="preview-pdf-wrap">
+        <vue-pdf-embed :source="pdfState.source"/>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.preview-pdf-wrap{
+}
+</style>