使用pdfjs-dist实现PDF预览

<template>
  <div>
    <div id="the-canvas"></div>
  </div>
</template>

<script>
import PDFJS from "pdfjs-dist";
import { TextLayerBuilder } from "pdfjs-dist/web/pdf_viewer";
import "pdfjs-dist/web/pdf_viewer.css";
PDFJS.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.js";

export default {
  data(){
    return{
      scale: 1,
    }
  },
  mounted() {
    const parentBox = document.querySelector(`#the-canvas`);
    //为了让pdf和容器有一个内边距，所以减去了20
    this.boxWidth = parentBox.offsetWidth - 20;
    this.getPDF();
    console.log(this.pdfDoc)
  },
  methods:{
    //获取最外面的父容器
    getParentBox(){
      return document.getElementById('the-canvas');
    },
    //根据容器宽度和PDF宽度确定缩放比例，保证PDF文件可以占满整个父容器盒子，不会溢出也不会太小；
    async getScaleBox(pdfPage){
      await pdfPage.then(res => {
        const [x1, , x2] = res._pageInfo.view;