pdf预览功能添加

src/views/pdf/preview.vue

@@ -1,5 +1,31 @@
 <template>
   <div class="head">
+    <van-popup round v-model:show="sendEamilVisible">
+      <div class="email">
+        <div @click="()=>{
+          sendEamilVisible=false
+
+        }" class="email-close">
+          <img  class="" src="@/assets/img/close_gray.png"/>
+        </div>
+        <img class="email-letter" src="@/assets/img/letter.png" />
+        <div class="email-text1">
+          <span>请输入您的邮箱</span>
+        </div>
+        <div class="email-text2">
+          <span>5分钟内将发送到您的邮箱，请注意查收。 </span>
+        </div>
+        <div class="email-filed">
+          <input v-model="emailAddress" class="email-filed-text" type="email" />
+          <div class="email-filed-icon">
+            <img src="@/assets/img/email-icon.png" />
+          </div>
+        </div>
+        <div @click="send" class="email-buttons">
+          <div class="email-buttons-sure">确认</div>
+        </div>
+      </div>
+    </van-popup>
     <span class="head-text">学习资料提取</span>
     <div class="head-button">
       <a :href="pdfUrl" class="head-button-download">
@@ -10,7 +36,14 @@
         />
         下载到本地
       </a>
-      <div class="head-button-send">
+      <div
+        @click="
+          () => {
+            sendEamilVisible = true;
+          }
+        "
+        class="head-button-send"
+      >
         <img
           style="width: 12px; height: 13px; margin-right: 5px"
           src="@/assets/img/sendIcon.png"
@@ -18,29 +51,44 @@
       </div>
     </div>
   </div>
-  <div id="pdf-canvas">
-  </div>
+  <div id="pdf-canvas"></div>
 </template>
 <script lang="ts">
-import {  defineComponent } from 'vue';
+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的地址
+document.title = '预览pdf';
 export default defineComponent({
   setup() {},
   data() {
     return {
       pdfPagesNum: 1,
       readerpdfDoc: null,
-      pdfUrl:""
+      sendEamilVisible: false,
+      pdfUrl: '',
+      emailAddress:""
     };
   },
   methods: {
+    send(){
+      let reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
+      if( reg.test(this.emailAddress)){
+
+      }
+      else{
+        this.$notify('邮箱格式错误');
+
+      }
+     
+
+    },
     getPdf(url: string) {
       let that = this;
-      document.getElementById('pdf-canvas').innerHTML=""
+      document.getElementById('pdf-canvas').innerHTML = '';
       PDFJS.getDocument(url).promise.then((pdfDoc) => {
         this.pdfPagesNum = pdfDoc.numPages; // pdf的总页数
         //获取第pageNum页的数据
@@ -53,7 +101,7 @@ export default defineComponent({
       pdfDoc.getPage(pageNum).then((page) => {
         // 设置canvas相关的属性
         // console.log(canvasDomArr.value)
-        const canvas:HTMLCanvasElement =  document.createElement('canvas')
+        const canvas: HTMLCanvasElement = document.createElement('canvas');
         canvas.classList.add('pdf-canvas');
         const ctx = canvas.getContext('2d');
         const dpr = window.devicePixelRatio || 1;
@@ -78,11 +126,11 @@ export default defineComponent({
         // 数据渲染到canvas画布上
         page.render(context);
         //插入canvas
-        document.getElementById('pdf-canvas')?.appendChild(canvas)
+        document.getElementById('pdf-canvas')?.appendChild(canvas);
       });
     },
   },
-  mounted () {
+  mounted() {
     this.getPdf('./web/科目一标识.pdf');
   },
 });
@@ -160,6 +208,75 @@ export default defineComponent({
 // });
 </script>
 <style lang="scss">
+.email {
+  position: relative;
+  width: 580px;
+  .email-close{
+    position: absolute;
+    top: 48px;
+    right: 28px;
+    >img{
+      width: 32px;
+      height: 32px;
+    }
+  }
+  .email-letter {
+    width: 580px;
+    height: 18px;
+  }
+  .email-text1 {
+    padding-top: 44px;
+    padding-bottom: 40px;
+    font-weight: 600;
+  }
+  .email-text2{
+    font-size: 26px;
+    color: #5C6066;
+    margin-bottom: 30px;
+  }
+  .email-buttons{
+    padding-top: 40px;
+    padding-bottom: 52px;
+    display: flex;
+    justify-content: center;
+    .email-buttons-sure{
+      width: 200px;
+      font-size: 26px;
+      height: 60px;
+      line-height: 60px;
+      background: #498ef5;
+      color: #fff;
+      border-radius: 30px;
+      overflow: hidden;
+
+    }
+  }
+  .email-filed{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    position: relative;
+    .email-filed-icon{
+      position: absolute;
+      left: 50px;
+      top: 12px;
+      >img{
+        width: 29px;
+        height: 22px;
+      }
+    }
+    .email-filed-text{
+      width: 500px;
+      background: #F2F3F5;
+      border: 2px solid #E8E8E8;
+      border-radius: 16px;
+      overflow: hidden;
+      color: #6f747c;
+      height: 60px;
+      padding-left: 60px;
+    }
+  }
+}
 .head {
   width: 100%;
   height: 118px;
@@ -169,6 +286,7 @@ export default defineComponent({
   align-content: center;
   align-items: center;
   justify-content: space-between;
+
   .head-text {
     color: #498ef5;
     font-size: 34px;