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

<template>
  <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 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的地址
export default defineComponent({
  setup() {},
  data() {
    return {
      pdfPagesNum: 1,
      readerpdfDoc: null,
      pdfUrl:""
    };
  },
  methods: {
    getPdf(url: string) {
      let that = this;
      document.getElementById('pdf-canvas').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 () {
    this.getPdf('./web/科目一标识.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">
.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>