duy 2 months ago
parent
commit
b1bc3bab84
3 changed files with 1 additions and 172 deletions
  1. 1 13
      src/router/views/index.js
  2. 0 131
      src/views/util/PdfPreview.vue
  3. 0 28
      src/views/util/pdf.vue

+ 1 - 13
src/router/views/index.js

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

+ 0 - 131
src/views/util/PdfPreview.vue

@@ -1,131 +0,0 @@
-<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>

+ 0 - 28
src/views/util/pdf.vue

@@ -1,28 +0,0 @@
-<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>