拿到PDF二进制文件流后如何展示PDF的封面？

1、安装 pdf.js
注：pdfjs-dist 必须跟 vue-pdf 版本匹配

npm install pdfjs-dist

2、引入 pdfjs-dist

<script>
import * as pdfjsLib from "pdfjs-dist";
pdfjsLib.GlobalWorkerOptions.workerSrc =
  "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js";
</script>

3、场景一：如有多个封面需要展示，循环画canvas

<template>
    <div
      class="content-div"
      v-for="(item, index) in propCompanyData.authorize_info"
      :key="item.id"
    >
    <canvas
         v-show="item.pdfData"
         :ref="'pdfCanvas' + item.id"  //每个数据有独立的ref
         style="
          width: 100%;
          box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
          height: 542px;
         "
    ></canvas>
</div>
</template>

<script>
    async loadPdfCovers() {
      // 本案例的 propCompanyData 数据是从父组件传递过来的，pdfData在父组件中已进行赋值为二进制数据
      for (const item of this.propCompanyData.authorize_info) {
        // item.pdfData 里存放的是二进制数据
        if (item.pdfData) {
          // 循环调用画canvas
          await this.renderPdfCover(item);
        }
      }
    },
    // 渲染canvas
    async renderPdfCover(item) {
      // 获取 canvas 元素
      const canvas = this.$refs["pdfCanvas" + item.id][0];
      const context = canvas.getContext("2d");

      // 使用 pdf.js 处理 pdfData
      const pdf = await pdfjsLib.getDocument({ data: item.pdfData }).promise;
      const page = await pdf.getPage(1); // 获取第一页面
      const scale = 1.5;
      const viewport = page.getViewport({ scale });

      // 设置 canvas 尺寸
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      // 渲染页面到 canvas
      page.render({
        canvasContext: context,
        viewport: viewport,
      });
    },
</script>

4、场景二：如果只有一个封面需要展示，获取到二进制流后，直接调用 renderPdfCover 方法， 修改为下

async renderPdfCover(item) {
      //将 const canvas = this.$refs["pdfCanvas" + item.id][0]; 改为
      const canvas = this.$refs["pdfCanvas"]; // pdfCanvas 是你对应canvas的ref名
},