pdf预览功能修改

src/views/pdf/preview.vue

@@ -1,24 +1,50 @@
 <template>
-
-  <div ref="container"></div>
-  <h1>查看PDF文件</h1>
-  <canvas class="pdf-canvas" ref="renderContext"></canvas>
+  <div class="head">
+    <span class="head-text">学习资料提取</span>
+    <div class="head-button">
+      <a :href="pdfUrl" class="head-button-download">
+        <img
+          class=""
+          style="width: 12px; height: 13px; margin-right: 5px"
+          src="@/assets/img/downIcon.png"
+        />
+        下载到本地
+      </a>
+      <div class="head-button-send">
+        <img
+          style="width: 12px; height: 13px; margin-right: 5px"
+          src="@/assets/img/sendIcon.png"
+        />发送到邮箱
+      </div>
+    </div>
+  </div>
+  <div>
+    <canvas
+      class="pdf-canvas"
+      v-for="(item, index) in pdfPagesNum"
+      :key="index"
+      :ref="renderContext"
+    ></canvas>
+  </div>
 </template>
 <script setup>
-import { ref,onMounted } 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 { ref, onMounted } 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';
 
 PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker; //设置PDFJS.GlobalWorkerOptions.workerSrc的地址
 
 let container = ref(null);
-let renderContext = ref(null);
-let pdfUrl = "";
+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
@@ -34,20 +60,23 @@ function pdfChange(event) {
 }
 function getPdf(url, pageNum) {
   PDFJS.getDocument(url).promise.then((pdfDoc) => {
-    pdfPagesNum.value = pdfDoc.numPages * 10; // pdf的总页数
+    pdfPagesNum.value = pdfDoc.numPages; // pdf的总页数
     //获取第pageNum页的数据
-    readerpdfDoc = pdfDoc;
-    showPdf(pdfDoc,pageNum)
+    for (let index = 1; index <= pdfDoc.numPages; index++) {
+      readerpdfDoc = pdfDoc;
+      showPdfs(pdfDoc, index);
+    }
   });
 }
 function currentChange(num) {
-  showPdf(readerpdfDoc, num);
+  showPdfs(readerpdfDoc, num);
 }
-function showPdf(pdfDoc,pageNum) {
+function showPdfs(pdfDoc, pageNum) {
   pdfDoc.getPage(pageNum).then((page) => {
     // 设置canvas相关的属性
-    const canvas = renderContext.value;
-    const ctx = canvas.getContext("2d");
+    // console.log(canvasDomArr.value)
+    const canvas = canvasDomArr.value[pageNum - 1];
+    const ctx = canvas.getContext('2d');
     const dpr = window.devicePixelRatio || 1;
     const bsr =
       ctx.webkitBackingStorePixelRatio ||
@@ -71,14 +100,57 @@ function showPdf(pdfDoc,pageNum) {
     page.render(context);
   });
 }
-onMounted(()=>{
-     getPdf('./web/科目一标识.pdf', 1);
-})
+onMounted(() => {
+  getPdf('./web/科目一标识.pdf', 1);
+});
 </script>
-<style scoped>
-.pdf-canvas{
-    width: 100%;
-    
-
+<style lang="scss" scoped>
+.head {
+  width: 100%;
+  height: 118px;
+  padding-left: 20px;
+  padding-right: 40px;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: space-between;
+  .head-text {
+    color: #498ef5;
+    font-size: 34px;
+  }
+  .head-button {
+    display: flex;
+    justify-content: space-between;
+    .head-button-download {
+      background: #01c18d;
+      width: 204px;
+      height: 48px;
+      color: #fff;
+      border-radius: 60px;
+      margin-right: 15px;
+      line-height: 48px;
+      font-size: 26px;
+      display: flex;
+      align-content: center;
+      align-items: center;
+      justify-content: center;
+    }
+    .head-button-send {
+      background: #498ef5;
+      width: 204px;
+      height: 48px;
+      color: #fff;
+      border-radius: 60px;
+      line-height: 48px;
+      font-size: 26px;
+      display: flex;
+      align-content: center;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+.pdf-canvas {
+  width: 100%;
 }
 </style>