pdf预览功能修改

src/views/pdf/preview.vue

@@ -23,87 +23,143 @@
       class="pdf-canvas"
       v-for="(item, index) in pdfPagesNum"
       :key="index"
-      :ref="renderContext"
+      :ref="'pdf-canvas-' + (index+1)"
     ></canvas>
   </div>
 </template>
-<script setup>
-import { ref, onMounted } from 'vue';
+<script lang="ts">
+import {  defineComponent } from 'vue';
 import * as PDFJS from 'pdfjs-dist/legacy/build/pdf'; // 引入PDFJS
 import pdfjsWorker from 'pdfjs-dist/legacy/build/pdf.worker.entry.js'; // 引入workerSrc的地址
 import 'pdfjs-dist/web/pdf_viewer.css';
-
+import { PDFDocumentProxy } from 'pdfjs-dist/types/web/pdf_find_controller';
 PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker; //设置PDFJS.GlobalWorkerOptions.workerSrc的地址
+export default defineComponent({
+  setup() {},
+  data() {
+    return {
+      pdfPagesNum: 0,
+      readerpdfDoc: null,
+    };
+  },
+  methods: {
+    getPdf(url: string) {
+      let that = this;
+      PDFJS.getDocument(url).promise.then((pdfDoc) => {
+        this.pdfPagesNum = pdfDoc.numPages; // pdf的总页数
+        //获取第pageNum页的数据
+        for (let index = 1; index <= pdfDoc.numPages; index++) {
+          that.showPdfs(pdfDoc, index);
+        }
+      });
+    },
+    showPdfs(pdfDoc: PDFDocumentProxy, pageNum: number) {
+      pdfDoc.getPage(pageNum).then((page) => {
+        // 设置canvas相关的属性
+        // console.log(canvasDomArr.value)
+        const canvas:HTMLCanvasElement = this.$refs['pdf-canvas-'+pageNum] as HTMLCanvasElement
 
-let container = ref(null);
-let canvasDomArr = ref([]);
-let renderContext = (el) => {
-  canvasDomArr.value.push(el);
-};
+        const ctx = canvas.getContext('2d');
+        const dpr = window.devicePixelRatio || 1;
+        const bsr =
+          ctx?.webkitBackingStorePixelRatio ||
+          ctx?.mozBackingStorePixelRatio ||
+          ctx?.msBackingStorePixelRatio ||
+          ctx?.oBackingStorePixelRatio ||
+          ctx?.backingStorePixelRatio ||
+          1;
+        const ratio = dpr / bsr;
+        const viewport = page.getViewport({ scale: 1 });
+        canvas.width = viewport.width * ratio;
+        canvas.height = viewport.height * ratio;
+        // canvas.style.width = viewport.width + "px";
+        // canvas.style.height = viewport.height + "px";
+        ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+        const context = {
+          canvasContext: ctx,
+          viewport: viewport,
+        };
+        // 数据渲染到canvas画布上
+        page.render(context);
+      });
+    },
+  },
+  mounted () {
+    this.getPdf('./web/科目一标识.pdf');
+  },
+});
 
-let pdfUrl = './web/科目一标识.pdf';
-let pdfPagesNum = ref(0);
-let readerpdfDoc = null;
+// PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker; //设置PDFJS.GlobalWorkerOptions.workerSrc的地址
 
-function pdfChange(event) {
-  if (window.createObjectURL != undefined) {
-    // basic
-    pdfUrl = window.createObjectURL(event.target.files[0]);
-  } else if (window.URL != undefined) {
-    // mozilla(firefox)
-    pdfUrl = window.URL.createObjectURL(event.target.files[0]);
-  } else if (window.webkitURL != undefined) {
-    // webkit or chrome
-    pdfUrl = window.webkitURL.createObjectURL(event.target.files[0]);
-  }
-  getPdf(pdfUrl, 1);
-}
-function getPdf(url, pageNum) {
-  PDFJS.getDocument(url).promise.then((pdfDoc) => {
-    pdfPagesNum.value = pdfDoc.numPages; // pdf的总页数
-    //获取第pageNum页的数据
-    for (let index = 1; index <= pdfDoc.numPages; index++) {
-      readerpdfDoc = pdfDoc;
-      showPdfs(pdfDoc, index);
-    }
-  });
-}
-function currentChange(num) {
-  showPdfs(readerpdfDoc, num);
-}
-function showPdfs(pdfDoc, pageNum) {
-  pdfDoc.getPage(pageNum).then((page) => {
-    // 设置canvas相关的属性
-    // console.log(canvasDomArr.value)
-    const canvas = canvasDomArr.value[pageNum - 1];
-    console.log(canvas)
-    const ctx = canvas.getContext('2d');
-    const dpr = window.devicePixelRatio || 1;
-    const bsr =
-      ctx.webkitBackingStorePixelRatio ||
-      ctx.mozBackingStorePixelRatio ||
-      ctx.msBackingStorePixelRatio ||
-      ctx.oBackingStorePixelRatio ||
-      ctx.backingStorePixelRatio ||
-      1;
-    const ratio = dpr / bsr;
-    const viewport = page.getViewport({ scale: 1 });
-    canvas.width = viewport.width * ratio;
-    canvas.height = viewport.height * ratio;
-    // canvas.style.width = viewport.width + "px";
-    // canvas.style.height = viewport.height + "px";
-    ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
-    const context = {
-      canvasContext: ctx,
-      viewport: viewport,
-    };
-    // 数据渲染到canvas画布上
-    page.render(context);
-  });
-}
-onMounted(() => {
-  getPdf('./web/科目一标识.pdf', 1);
-});
+// let container = ref(null);
+// let canvasDomArr = ref([]);
+// let renderContext = (el) => {
+//   canvasDomArr.value.push(el);
+// };
+
+// let pdfUrl = './web/科目一标识.pdf';
+// let pdfPagesNum = ref(0);
+// let readerpdfDoc = null;
+
+// function pdfChange(event) {
+//   if (window.createObjectURL != undefined) {
+//     // basic
+//     pdfUrl = window.createObjectURL(event.target.files[0]);
+//   } else if (window.URL != undefined) {
+//     // mozilla(firefox)
+//     pdfUrl = window.URL.createObjectURL(event.target.files[0]);
+//   } else if (window.webkitURL != undefined) {
+//     // webkit or chrome
+//     pdfUrl = window.webkitURL.createObjectURL(event.target.files[0]);
+//   }
+//   getPdf(pdfUrl, 1);
+// }
+// function getPdf(url, pageNum) {
+//   PDFJS.getDocument(url).promise.then((pdfDoc) => {
+//     pdfPagesNum.value = pdfDoc.numPages; // pdf的总页数
+//     //获取第pageNum页的数据
+//     for (let index = 1; index <= pdfDoc.numPages; index++) {
+//       readerpdfDoc = pdfDoc;
+//       showPdfs(pdfDoc, index);
+//     }
+//   });
+// }
+// function currentChange(num) {
+//   showPdfs(readerpdfDoc, num);
+// }
+// function showPdfs(pdfDoc, pageNum) {
+//   pdfDoc.getPage(pageNum).then((page) => {
+//     // 设置canvas相关的属性
+//     // console.log(canvasDomArr.value)
+//     const canvas = canvasDomArr.value[pageNum - 1];
+//     console.log(canvas)
+//     const ctx = canvas.getContext('2d');
+//     const dpr = window.devicePixelRatio || 1;
+//     const bsr =
+//       ctx.webkitBackingStorePixelRatio ||
+//       ctx.mozBackingStorePixelRatio ||
+//       ctx.msBackingStorePixelRatio ||
+//       ctx.oBackingStorePixelRatio ||
+//       ctx.backingStorePixelRatio ||
+//       1;
+//     const ratio = dpr / bsr;
+//     const viewport = page.getViewport({ scale: 1 });
+//     canvas.width = viewport.width * ratio;
+//     canvas.height = viewport.height * ratio;
+//     // canvas.style.width = viewport.width + "px";
+//     // canvas.style.height = viewport.height + "px";
+//     ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+//     const context = {
+//       canvasContext: ctx,
+//       viewport: viewport,
+//     };
+//     // 数据渲染到canvas画布上
+//     page.render(context);
+//   });
+// }
+// onMounted(() => {
+//   getPdf('./web/科目一标识.pdf', 1);
+// });
 </script>
 <style lang="scss" scoped>
 .head {