fixed

src/components/PdfViewer/index.vue

@@ -1,40 +1,33 @@
 <template>
   <div class="box" v-show="open">
-    <div
-      id="scroller"
+    <div id="scroller"
       class="pdf-viewer"
       @mousedown="startSelection"
       @mousemove="updateSelection"
       @mouseup="endSelection"
-      @scroll="handleScroll"
-    >
+      @scroll="handleScroll">
       <canvas ref="pdfCanvas" />
       <canvas ref="tempCanvas" v-show="false" />
       <div v-if="selection" class="selection-box" :style="selectionStyle"></div>
     </div>
-    <a-button
-      type="primary"
-      class="btn"
-      v-show="captureButtonVisible"
-      :style="captureButtonStyle"
-      :icon="h(ScissorOutlined)"
-      @click="captureSelection"
-      >截 图</a-button
-    >
-    <a-button
-      type="primary"
-      class="btn-close"
-      :style="closeButtonStyle"
-      :icon="h(CloseOutlined)"
-      @click="close"
-      >取 消</a-button
-    >
+    <div class="tool-box">
+      <a-button type="primary" class="tool-button" :icon="h(MinusOutlined)" @click="zoomOut"/>
+      <span>{{ Math.round(zoomLevel * 100) }}%</span>
+      <a-button type="primary" class="tool-button" :icon="h(PlusOutlined)" @click="zoomIn" />
+    </div>
+    <a-button type="primary" class="btn" v-show="captureButtonVisible" :style="captureButtonStyle" :icon="h(ScissorOutlined)" @click="captureSelection">截 图</a-button>
+    <a-button type="primary" class="btn-close" :style="closeButtonStyle" :icon="h(CloseOutlined)" @click="close">取 消</a-button>
   </div>
 </template>
 <script>
   import * as pdfjsLib from 'pdfjs-dist';
   import {h} from "vue";
-  import {CloseOutlined, ScissorOutlined} from "@ant-design/icons-vue";
+  import {
+    CloseOutlined,
+    MinusOutlined,
+    PlusOutlined,
+    ScissorOutlined
+  } from "@ant-design/icons-vue";
   pdfjsLib.GlobalWorkerOptions.workerSrc = import.meta.env.VITE_GLOB_WORK_SRC;
 
   export default {
@@ -42,6 +35,7 @@
     data() {
       return {
         open: false,
+        zoomLevel: 1,
         start: false,
         selection: null,
         startPoint: null,
@@ -50,27 +44,29 @@
         captureButtonStyle: null,
         closeButtonStyle: null,
         captureButtonVisible: false,
+        pdfData: undefined,
       }
     },
     methods: {
+      MinusOutlined,
+      PlusOutlined,
       CloseOutlined,
       ScissorOutlined,
       h,
-      async loadPdf(param) {
-        let loadingTask;
-        loadingTask = pdfjsLib.getDocument({data: param});
+      async loadPdf() {
+        let loadingTask = pdfjsLib.getDocument({data: this.pdfData.slice()});
         const pdf = await loadingTask.promise;
         const page = await pdf.getPage(1); // 获取第一页
-        const viewport = page.getViewport({scale: 1.75});
+        const viewport = page.getViewport({scale: this.zoomLevel});
         const canvas = this.$refs.pdfCanvas;
         const context = canvas.getContext('2d');
-        canvas.height = viewport.height;
+        console.log(viewport.width + '' + viewport.height);
         canvas.width = viewport.width;
-        const renderContext = {
+        canvas.height = viewport.height;
+        await page.render({
           canvasContext: context,
           viewport: viewport,
-        };
-        await page.render(renderContext).promise;
+        }).promise;
       },
       show() {
         this.open = true;
@@ -121,7 +117,7 @@
             width: `${this.selection.width}px`,
             height: `${this.selection.height}px`,
             position: 'absolute',
-            border: '1px dashed red',
+            border: '2px dashed red',
           };
         }
       },
@@ -173,7 +169,15 @@
       },
       hideCaptureButton() {
         this.captureButtonVisible = false;
-      }
+      },
+      async zoomIn() {
+        this.zoomLevel = Math.min(3, this.zoomLevel + 0.1);
+        await this.loadPdf();
+      },
+      async zoomOut() {
+        this.zoomLevel = Math.max(0.5, this.zoomLevel - 0.1);
+        await this.loadPdf();
+      },
     },
   };
 </script>
@@ -200,7 +204,7 @@
 
       .selection-box {
         position: absolute;
-        border: 1px dashed red;
+        border: 2px dashed red;
       }
     }
 
@@ -219,4 +223,29 @@
       transform: translateX(-50%);
     }
   }
+
+  .tool-box {
+    position: absolute;
+    top: 5px;
+    right: 20px;
+    margin-right: 20px;
+    padding: 5px;
+    background: #ffffff;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    border-radius: 5px;
+
+    .tool-button {
+      border-radius: 100px;
+      padding: 5px;
+      width: 36px;
+      height: 36px;
+    }
+
+    & > span {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+  }
 </style>

src/views/data/task/index.vue

@@ -219,7 +219,8 @@ import { usePermission } from '@/hooks/web/usePermission';
 
   const pdfView = ref<any>();
   const openPdf = async (pdfData: any) => {
-    await pdfView.value.loadPdf(pdfData);
+    pdfView.value.pdfData = pdfData;
+    await pdfView.value.loadPdf();
     pdfView.value.show();
   };