预览pdf页面

package.json

@@ -20,6 +20,7 @@
     "normalize.css": "^8.0.1",
     "vant": "^3.3.4",
     "vue": "^3.2.16",
+    "vue-pdf-embed": "^1.1.6",
     "vue-router": "^4.0.12",
     "vuex": "^4.0.2"
   },

src/router/hzyb/index.js

@@ -61,6 +61,11 @@ export const hzybRoutes=[
                 name:"hzybChapterDetail",
                 component: () => import("@/views/hzyb/report/ChapterDetail.vue"),
             },
+            {
+                path:"previewpdf",
+                name:"hzybPreviewPDF",
+                component:() => import("@/views/hzyb/report/PreviewPDF.vue")
+            }
         ]
     }
 ]

src/views/hzyb/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>