使用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;
        const pageWidth = x2 - x1;
        this.scale = this.boxWidth / pageWidth;
      })
      const scale = this.scale;
      console.log(this.scale)
      return scale
    },
    //通过URL请求PDF
    async getPDF(url) {
      const myHeader = {
        method: "GET",
        Accept: "application/json",
        "if-None-Match": 1,
        pragma: "no-cache",
        "cache-control": " no-cache"
      };
      console.log(url)
      const src = {
        url: '/flie/long31.pdf',
        httpHeaders: myHeader,
        withCredentials: true,
        cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/cmaps/",
        cMapPacked: true,
      }
      var loadingTask = PDFJS.getDocument(src);
      loadingTask.promise.then(pdf => {
        const pdfDoc = pdf;
        this.pdfDoc = pdfDoc;
        const pdfPage = pdfDoc.getPage(1);
        //确定缩放比例
        const scalePromise = this.getScaleBox(pdfPage);
        this.scale = scalePromise.then(res => {
            console.log(res);
            return res
        })
        this.renderAll();
      }).catch(err => err);
    },
    //渲染某一页PDF
    render(pageNum){
      const that = this;
      this.pdfDoc.getPage(pageNum).then(function(page) {
        // console.log(page);
        // 创建新的canvas
        const canvas = document.createElement(`canvas`);
        const context = canvas.getContext("2d");
        var viewport = page.getViewport({ scale: that.scale, });
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        page.render(renderContext);
        //创建渲染的dom
        const pageDom = document.createElement('div');
        pageDom.className = `page${pageNum}`;
        pageDom.append(canvas);
        let parentBox = that.getParentBox();
        parentBox.append(pageDom);
      });
      
    },
    //渲染所有页PDF
    renderAll(){
      const allPages = this.pdfDoc.numPages;
      console.log(allPages);
      for(let i = 0;i < allPages;i++){
          this.render(i);
      }
    },
  },
}
</script>

<style>

</style>