pdf预览

public/index.html

@@ -24,6 +24,8 @@
   <script src="<%= BASE_URL %>cdn/xlsx/FileSaver.min.js"></script>
   <script src="<%= BASE_URL %>cdn/xlsx/xlsx.full.min.js"></script>
   <link rel="icon" href="<%= BASE_URL %>favicon.png">
+  <!-- 在 public/index.html 中添加 -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
   <title>工程数字档案管理后台</title>
   <style>
     html,

src/mock/menu.js

@@ -35,6 +35,15 @@ const top = [{
       i18n: 'test',
     },
     parentId: 3
+  },
+{
+    label: "pdf预览",
+    icon: 'el-icon-document',
+    path: "pdf",
+    meta: {
+      i18n: 'pdf',
+    },
+    parentId: 4
   }]
 export default ({mock}) => {
   if (!mock) return;

src/router/views/index.js

@@ -136,7 +136,22 @@ export default [{
             component: () =>
                 import ( /* webpackChunkName: "views" */ '@/views/util/test')
         }]
-    }, {
+    }, 
+        {
+            path: '/pdf',
+                  
+            name: 'pdf',
+            
+            meta: {
+                i18n: 'pdf',
+            
+            },
+            component: () =>
+                import ( /* webpackChunkName: "views" */'@/views/util/pdf')
+            }, 
+   
+    
+    {
         path: '/dict-horizontal',
         component: Layout,
         redirect: '/dict-horizontal/index',

src/views/codeRule/ruleManage.vue

@@ -168,7 +168,7 @@
                       <div>
                       <i class="el-icon-document"></i>
 
-                      <el-link v-for="item in ruleDataDetail.standardFiles" :key="item.id" type="primary" :href="item.standardFileUrl"  style="margin-right: 5px;">{{ item.fileName }}</el-link>
+                      <el-link v-for="item in ruleDataDetail.standardFiles" :key="item.id" type="primary" @click="viewPdf(item.standardFileUrl)"  style="margin-right: 5px;">{{ item.fileName }}</el-link>
                       
 
                       </div>
@@ -1474,8 +1474,15 @@ import { getStore, setStore } from "@/util/store";
           }).finally(() => {
                       this.refreshLoad=false
           });
+    },
+     viewPdf(url){
+      this.$router.push({
+        path: '/pdf',
+        query: { url:url}
+      })
     }
-  }
+  },
+   
   }
 </script>
 

src/views/util/PdfPreview.vue

@@ -0,0 +1,131 @@
+<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>
+      <!-- 添加返回按钮 -->
+      <button @click="goBack">返回</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 {
+  data() {
+    return {
+      dialogVisible: false,
+      pdfDoc: null,
+      pageNum: 1,
+      pageCount: 0,
+      pdfUrl: ''
+    }
+  },
+   watch: {
+    // 观察 pdfUrl 的变化
+    pdfUrl(newVal) {
+      console.log(newVal,'newVal');
+ 
+      if (newVal !== this.pdfUrl) {
+         this.dialogVisible = false
+        this.openPdf();
+      }
+    }
+  },
+  mounted() {
+   
+       this.pdfUrl = this.$route.query.url || ''; // 假设pdfUrl是通过查询参数传递的
+    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/util/pdf.vue

@@ -0,0 +1,28 @@
+<template>
+  <div style="height: 100%;">
+    <pdf-preview :url="pdfUrl"/>
+  </div>
+</template>
+
+
+<script>
+import PdfPreview from './PdfPreview.vue'
+
+export default {
+  name: 'PdfView',
+  components: {
+    PdfPreview
+  },
+  data() {
+    return {
+      pdfUrl: '' // 初始化为空字符串
+    }
+  },
+  created() {
+    // 在组件创建时获取路由信息
+    this.pdfUrl = this.$route.query.url || ''; // 假设pdfUrl是通过查询参数传递的
+    console.log( this.pdfUrl,' this.pdfUrl');
+    
+  }
+}
+</script>