pdf

src/router/enforce.js

@@ -41,6 +41,12 @@ const routes = [
     name: "pdfView",
     component: () => import("@/views/common/pdfvVew.vue"),
   },
+  // pdf预览
+  {
+    path: "/pdfPreview",
+    name: "pdfPreview",
+    component: () => import("@/views/common/pdfPreview.vue"),
+  },
   // 企业不存在提示页面
   {
     path: "/notExist",

src/views/common/pdfPreview.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="header_body">
+			<header-nav
+				:slefBack="true"
+				@goBack="goBack"
+			>
+			</header-nav>
+  </div>
+  <div id="vue-pdf-view">
+  <div id="page-view">
+    <vue-pdf-embed  v-if="pdfState.isShow" :source="pdfState.pdfSource" :src="pdfState.pdfSource.url" :page="pdfState.pageNum" />
+  </div>
+  </div>
+</template>
+<script setup name="register">
+
+import VuePdfEmbed from "vue-pdf-embed";
+import {reactive, ref, nextTick} from "vue";
+import {baseUrl} from "@/config/env";
+import {createLoadingTask} from "vue3-pdfjs";
+
+
+
+const {useMy} = $globalStore;
+
+const route = useRoute();
+const pdfState = reactive({
+  isShow : false,
+  pdfSource: {
+    url: ref("http://localhost:85/profile//2025/06/04/a1f9937950780c9c5b5acb5acaa8478f.pdf")
+  },
+  // 当前页
+  pageNum: 1,
+  // 总页数
+  numPages: 1,
+})
+const scaleData = ref(1.0);
+const pageHeight = ref('100%');
+
+// 放大
+function zoomIn() {
+  scaleData.value += 0.1;
+  pageHeight.value = (parseInt(pageHeight.value) - 5.0) + '%';
+}
+// 缩小
+function zoomOut() {
+  scaleData.value -= 0.1;
+  pageHeight.value = (parseInt(pageHeight.value) + 5.0) + '%';
+}
+// 页面 放大/缩小 还原默认值
+function pageRest() {
+  scaleData.value = 1.0;
+  pageHeight.value = '100%';
+}
+
+
+//初始化参数，获取文件
+onMounted(() => {
+  console.log("获取路由参数:",  route?.query?.url);
+  pdfState.pdfSource.url =  baseUrl +route?.query?.url;
+  pdfState.isShow=true;
+});
+
+// 返回
+const goBack = () => {
+  route.go(-1);
+};
+</script>
+
+<style scoped>
+#vue-pdf-view{
+  position: absolute;
+  left: 50%;
+  transform: translatex(-50%) scale(1.0);
+  width: 70%;
+  height: 100%;
+  text-align: center;
+
+/* 内容溢出显示滚动条 */
+  overflow: scroll;
+/* 隐藏X、y轴滚动条*/
+  overflow-y: hidden;
+  overflow-x: hidden;
+}
+
+/* 设置滚动栏的宽、高*/
+#vue-pdf-view::-webkit-scrollbar {
+width: 8px;
+height: 8px;
+}
+#vue-pdf-view::-webkit-scrollbar-thumb {
+  border-radius: 15px;
+  background-color: #eee;
+}
+
+</style>
+
+
+

src/views/enforce/enforcementPlan.vue

@@ -217,7 +217,7 @@
         if (null != url) {
             router.push(
                 {
-                    path: "/pdfView",
+                    path: "/pdfPreview",
                     query: {
                         url: url
                     }