vue 通过PDF文件地址 pdf.js生成每页缩略图 代码实现

Vue 中使用 PDF.js 来生成 PDF 文件的每一页缩略图，通常需要以下几个步骤：

1. 首先，你需要在 HTML 中引入 `pdfjs-dist` 和样式资源，例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfjs-dist/2.17.459/pdf.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pdfjs-dist/2.17.459/web/viewer.min.css">

2. 创建 Vue 组件并初始化 PDFJS：

<template>
  <div>
    <button @click="loadPdf">加载 PDF</button>
    <viewer :src="pdfUrl" ref="viewerRef" />
  </div>
</template>

<script>
import { PDFViewer } from 'vue-pdf-viewer';

export default {
  components: {
    PDFViewer,
  },
  data() {
    return {
      pdfUrl: '',
      pageThumbnails: [],
    };
  },
  methods: {
    async loadPdf() {
      // 这里假设你已经有了一个 PDF URL
      this.pdfUrl = '你的PDF文件地址';
      
      try {
        await PDFJS.getDocument(this.pdfUrl).promise.then(pdf => {
          this.pageThumbnails = [];
          for (let i = 1; i <= pdf.numPages; i++) {
            const page = pdf.getPage(i);
            const scale = 1; // 缩放比例
            const imgData = await page.getOperatorList({ scale }).then(operatorList => {
              return PDFWorkerUtils.runWorker(new Uint8Array(operatorList)).then(data => {
                return canvasToBlob(data, 'image/jpeg');
              });
            });
            // 将图片转换为 base64 或者直接保存到数组中
            this.pageThumbnails.push(await imgData.arrayBuffer());
          }
        });
      } catch (error) {
        console.error('Error loading PDF:', error);
      }
    },
  },
};
</script>

这里使用了 `vue-pdf-viewer` 库（注意替换链接为实际版本），它封装了 PDF.js 的 Viewer 功能。在 `loadPdf` 方法中，我们获取 PDF 页面，并通过 `getOperatorList` 获取页面的位图数据，然后将其转存为图像数据。