mn-h5/src/views/pdf/preview.vue

<template>
  <div class="head">
    <van-popup :close-on-click-overlay="false" round v-model:show="sendEamilVisible">
      <div class="email">
        <div
          @touchstart="
            () => {
              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 @touchstart="send" class="email-buttons">
          <div class="email-buttons-sure">确认</div>
        </div>
      </div>
    </van-popup>
    <span class="head-text">学习资料提取</span>
    <div class="head-button">
      <div class="head-button-download">
        <img
          class=""
          style="width: 12px; height: 13px; margin-right: 5px"
          src="@/assets/img/downIcon.png"
        />
        下载到本地
      </div>
      <div
        @touchstart="
          () => {
            sendEamilVisible = true;
          }
        "
        class="head-button-send"
      >
        <img
          style="width: 12px; height: 13px; margin-right: 5px"
          src="@/assets/img/sendIcon.png"
        />发送到邮箱
      </div>
    </div>
  </div>
  <div id="pdf-canvas"></div>
</template>
<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的地址
document.title = '预览pdf';
import { Toast } from 'vant';
import api from '@/api/api';
export default defineComponent({
  setup() {},
  data() {
    return {
      pdfPagesNum: 1,
      readerpdfDoc: null,
      sendEamilVisible: false,
      pdfUrl: '',
      emailAddress: '',
    };
  },
  methods: {
    download() {
      const name: string = this.$route.query.name as string;
      let src = window.location.origin + `/pdf/${name}.pdf`;
      tt.miniProgram.navigateTo({
        url:'/otherPages/download/index?src='+src
      })
    },
    send() {
      let reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (reg.test(this.emailAddress)) {
        api
          .studentEmailInfo({
            address: this.emailAddress,
            dictCode: Number(this.$route.query.code),
          })
          .then((res) => {
            Toast.success('成功发送');
          });
      } else {
        Toast.fail('邮箱格式错误');
      }
    },
    getPdf(url: string) {
      let that = this;
      (document.getElementById('pdf-canvas') as HTMLDivElement).innerHTML = '';
      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 = document.createElement('canvas');
        canvas.classList.add('pdf-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);
        //插入canvas
        document.getElementById('pdf-canvas')?.appendChild(canvas);
      });
    },
  },
  mounted() {
    const token: string = this.$route.query.token as string;
    window.localStorage.setItem('token', token);
    const name: string = this.$route.query.name as string;
    this.getPdf(`./pdf/${name}.pdf`);
  },
});

// PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker; //设置PDFJS.GlobalWorkerOptions.workerSrc的地址

// 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">
.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: 60px;
      top: 12px;
      > img {
        width: 29px;
        height: 22px;
      }
    }
    .email-filed-text {
      width: 500px;
      background: #f2f3f5;
      border: 2px solid #e8e8e8;
      border-radius: 30px;
      overflow: hidden;
      color: #6f747c;
      height: 60px;
      padding-left: 60px;
    }
  }
}
.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;
      cursor: pointer;
    }
    .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;
      cursor: pointer;
    }
  }
}
.pdf-canvas {
  width: 100%;
}
</style>