预览pdf修改

src/components/PdfView.vue

@@ -0,0 +1,37 @@
+<template>
+  <el-drawer
+    size="100%"
+    append-to-body
+    title="查看pdf文件"
+    :visible="drawerVisible"
+    :before-close="handleClose">
+    <div style="height: 100%;">
+      <viewPdf :pdfUrl="pdfUrl" v-if="drawerVisible"/>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import viewPdf from './viePdf.vue'
+
+export default {
+  components: { viewPdf },
+  data() {
+    return {
+      drawerVisible: false,
+      pdfUrl: ''
+    }
+  },
+  methods: {
+    // 暴露给父组件调用的方法
+    show(url) {
+      this.pdfUrl = url
+      this.drawerVisible = true
+    },
+    handleClose(done) {
+      this.drawerVisible = false
+      done()
+    }
+  }
+}
+</script>

src/components/viePdf.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="pdf-viewer">
+    <div class="pdf-content">
+      <canvas ref="pdfCanvas"></canvas>
+    </div>
+    <div class="pagination">
+      <button @click="prevPage">上一页</button>
+      <span>{{ pageNum }} / {{ pageCount }}</span>
+      <button @click="nextPage">下一页</button>
+
+    </div>
+  </div>
+</template>
+
+<script>
+window.pdfjsLib = pdfjsLib
+pdfjsLib.GlobalWorkerOptions.workerSrc = 
+  'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js'
+
+export default {
+   props: {
+    pdfUrl: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      pdfDoc: null,
+      pageNum: 1,
+      pageCount: 0,
+   
+    }
+  },
+   watch: {
+    // 观察 pdfUrl 的变化
+    pdfUrl(newVal) {
+      console.log(newVal,'newVal');
+ 
+      if (newVal !== this.pdfUrl) {
+         this.dialogVisible = false
+        this.openPdf();
+      }
+    }
+  },
+  mounted() {
+   
+      
+    console.log( this.pdfUrl,' this.pdfUrl1111111');
+     this.openPdf()
+  },
+  methods: {
+    goBack(){
+        this.dialogVisible = false
+      this.$router.go(-1)
+    },
+    openPdf() {
+      this.dialogVisible = true
+      this.loadPdf()
+    },
+    closeDialog() {
+      this.pdfDoc = null
+      this.pageNum = 1
+    },
+    async loadPdf() {
+      try {
+        // 加载 PDF 文档
+        const loadingTask = pdfjsLib.getDocument(this.pdfUrl)
+        this.pdfDoc = await loadingTask.promise
+        this.pageCount = this.pdfDoc.numPages
+        this.renderPage(this.pageNum)
+      } catch (error) {
+        this.$message.error('加载 PDF 失败: ' + error.message)
+      }
+    },
+    async renderPage(num) {
+      try {
+        const page = await this.pdfDoc.getPage(num)
+        const canvas = this.$refs.pdfCanvas
+        const ctx = canvas.getContext('2d')
+        const viewport = page.getViewport({ scale:1 })
+
+        canvas.height = viewport.height
+        canvas.width = viewport.width
+
+        await page.render({
+          canvasContext: ctx,
+          viewport: viewport
+        }).promise
+      } catch (error) {
+        this.$message.error('渲染 PDF 页面失败: ' + error.message)
+      }
+    },
+    prevPage() {
+      if (this.pageNum <= 1) return
+      this.pageNum--
+      this.renderPage(this.pageNum)
+    },
+    nextPage() {
+      if (this.pageNum >= this.pageCount) return
+      this.pageNum++
+      this.renderPage(this.pageNum)
+    }
+  }
+}
+</script>
+
+
+<style scoped>
+.pdf-viewer {
+  display: flex;
+  flex-direction: column;
+  height: 100vh; /* 或者固定高度如 800px */
+  text-align: center;
+
+}
+
+.pdf-content {
+  flex: 1;
+  overflow: auto; /* 内容超出时显示滚动条 */
+  border: 1px solid #ddd;
+  margin-bottom: 10px;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  padding: 10px;
+  background: #f5f5f5;
+  position: sticky;
+  bottom: 0;
+}
+</style>

src/views/codeRule/ruleManage.vue

@@ -451,6 +451,11 @@
         <LinkEle ref="linkEleRef" @confirm="confirmLinkEle" />
         <!-- 效果预览 -->
           <PreviewResult ref="previewResultRef" :ypList="ypList"/>
+          <!--  预览pdf -->
+            <PdfView
+           
+              ref="pdfDrawerRef"
+            />
    </div>
 </template>
 <script>
@@ -461,11 +466,13 @@ import PreviewResult from './PreviewResult.vue'
 import {getPage,edit,add,deleteItem,getById, addInfo,editInfo,getInfoPage,deleteItemInfo,updateTypeByTwo,standardUpdate } from "@/api/ruleManage/fileRule.js";
 import { getStore, setStore } from "@/util/store";
  import { getDictionary } from "@/api/system/dict";
+ import PdfView from '../../components/PdfView.vue';
   export default {
   components: {
     ConditionsSet,
     LinkEle,
-    PreviewResult
+    PreviewResult,
+    PdfView
   },
     data() {
       return {
@@ -586,7 +593,10 @@ import { getStore, setStore } from "@/util/store";
         isUploadVisible:false,//上传文件弹窗是否显示
         delIds:[],
         delFileIds:[],
-        refreshLoad:false
+        refreshLoad:false,
+        pdfDrawerVisible:false,
+        currentPdfUrl:'',
+
 
        
       };
@@ -1475,10 +1485,9 @@ import { getStore, setStore } from "@/util/store";
                       this.refreshLoad=false
           });
     },
-     viewPdf(url){
-      this.$router.push({
-        path: '/pdf',
-        query: { url:url}
+       viewPdf(url) {
+      this.$nextTick(() => {
+        this.$refs.pdfDrawerRef.show(url)
       })
     }
   },