用pdfjs-dist实现pdf预览功能

<template>
  <div class="index">
    <div class="indexbox">
      <div class="contentbox">
        <div class="content" v-for="(item,index) in startFile" :key="index">
          <canvas class="canvas" :id="'canvas'+`${index}`"></canvas>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//npm install --save pdfjs-dist@1.7.225
import {PDFJS} from "pdfjs-dist";
PDFJS.workerSrc = "/pdf.worker.min.js";
PDFJS.cMapUrl = "/cmaps/";
PDFJS.cMapPacked = true;
</script>

    // 预览多个pdf文件
    allPdfViews(arr){
      arr.forEach((item,index) => {
        let currenturl = item;
        let objectURL = URL.createObjectURL(currenturl)
        this.pdf(objectURL,"canvas" + index)
        .then(()=>{})
        .catch((err)=>{
          console.log(err);
        })
      });
    },
    // pdf是否有密碼
    // 1 => 未输入密码 2 => 密码错误  正确則直接跳出
    checkoutPassword(password, reason){
      this.password = password;
			if (reason == 1) {
        console.log();
			}
			if (reason == 2) {
        console.log();
			}
    },
    // pdf (展示第一頁內容)
    pdf(url,id){
      return PDFJS.getDocument(url,null,this.checkoutPassword,null)
      .then((pdf)=>{
        console.log(pdf);
        pdf.getPage(1).then((page)=>{
            let viewport = page.getViewport(1.5);
            let canvas = document.getElementById(id);
            let context = canvas.getContext("2d");
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            let renderContext = {
              canvasContext: context,
              viewport: viewport,
						};
            page.render(renderContext);
        });
      })
      .catch();
    }