vue3 pdfjs-dist base64渲染成pdf

以下是使用vue3和pdfjs-dist将base64渲染成pdf的示例代码：

1. 首先，安装pdfjs-dist依赖：

npm install pdfjs-dist --save

2. 在Vue组件中引入pdfjs-dist和pdf.worker.js文件：

import pdfjsLib from 'pdfjs-dist/build/pdf';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

3. 创建一个方法来渲染base64为pdf：

methods: {
  renderPDF(base64Data) {
    const loadingTask = pdfjsLib.getDocument({ data: atob(base64Data) });
    loadingTask.promise.then((pdf) => {
      const pageNumber = 1; // 渲染第一页
      pdf.getPage(pageNumber).then((page) => {
        const canvas = document.getElementById('pdf-canvas');
        const context = canvas.getContext('2d');
        const viewport = page.getViewport({ scale: 1 });
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        const renderContext = {
          canvasContext: context,
          viewport: viewport,
        };
        page.render(renderContext);
      });
    });
  },
}

4. 在模板中添加一个canvas元素来显示pdf：

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

5. 调用renderPDF方法并传入base64数据：

mounted() {
  const base64Data = "your_base64_data_here";
  this.renderPDF(base64Data);
}

请注意，上述代码中的"your_base64_data_here"需要替换为实际的base64数据。