在vuejs2中将base64格式的pdf显示为缩略图

npm install pdfjs-dist

import pdfjsLib from 'pdfjs-dist/build/pdf';

// 引入pdf.worker.js文件
import 'pdfjs-dist/build/pdf.worker.entry';

// 引入样式文件
import 'pdfjs-dist/web/pdf_viewer.css';

methods: {
  loadPDF() {
    // Base64格式的PDF数据
    const base64pdf = '...'; // 替换为实际的Base64字符串

    // 将Base64字符串转换为Uint8Array
    const pdfData = atob(base64pdf);
    const pdfDataLength = pdfData.length;
    const dataArray = new Uint8Array(pdfDataLength);
    for (let i = 0; i < pdfDataLength; i++) {
      dataArray[i] = pdfData.charCodeAt(i);
    }

    // 创建PDF文档实例
    pdfjsLib.getDocument(dataArray).promise.then(pdf => {
      // 获取第一页
      pdf.getPage(1).then(page => {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');

        // 设置画布尺寸与PDF页面尺寸一致
        const viewport = page.getViewport({ scale: 1 });
        canvas.width = viewport.width;
        canvas.height = viewport.height;

        // 将PDF页面渲染到画布上
        page.render({
          canvasContext: context,
          viewport: viewport
        }).promise.then(() => {
          // 获取渲染后的图像数据URL
          const thumbnailURL = canvas.toDataURL();

          // 将图像数据URL传递给Vue组件进行显示
          this.thumbnail = thumbnailURL;
        });
      });
    });
  }
}

<template>
  <div>
    <img :src="thumbnail" alt="PDF Thumbnail">
  </div>
</template>

mounted() {
  this.loadPDF();
}