vue-pdf 预览pdf 显示缩略图

可以使用 PDF.js 库来实现在 Vue 中预览 PDF 并显示缩略图。具体实现步骤如下：

1. 安装 pdfjs-dist 和 vue-pdf 依赖：

   npm install pdfjs-dist vue-pdf --save

2. 在 Vue 组件中引入依赖：

   import pdfjsLib from 'pdfjs-dist';
   import VuePdf from 'vue-pdf';

3. 在组件中使用 VuePdf 组件，并设置 props：

   <template>
     <div>
       <vue-pdf :src="pdfUrl" :page="currentPage" @num-pages="numPages = $event"></vue-pdf>
       <div v-for="i in numPages" :key="i">
         <img :src="`data:image/jpeg;base64,${thumbnails[i - 1]}`" />
       </div>
     </div>
   </template>

   <script>
   export default {
     components: {
       VuePdf,
     },
     data() {
       return {
         pdfUrl: 'https://example.com/example.pdf',
         currentPage: 1,
         numPages: 0,
         thumbnails: [],
       };
     },
     methods: {
       async generateThumbnails() {
         const pdf = await pdfjsLib.getDocument(this.pdfUrl).promise;
         for (let i = 1; i <= this.numPages; i++) {
           const page = await pdf.getPage(i);
           const viewport = page.getViewport({ scale: 0.5 });
           const canvas = document.createElement('canvas');
           const canvasContext = canvas.getContext('2d');
           canvas.height = viewport.height;
           canvas.width = viewport.width;
           await page.render({ canvasContext, viewport }).promise;
           const thumbnail = canvas.toDataURL('image/jpeg');
           this.thumbnails.push(thumbnail.split(',')[1]);
         }
       },
     },
     mounted() {
       this.generateThumbnails();
     },
   };
   </script>

在上面的代码中，我们使用了 VuePdf 组件来预览 PDF，同时使用了 PDF.js 库来生成缩略图。在 mounted 钩子函数中调用 generateThumbnails 方法来生成缩略图，并将缩略图数据存储在 thumbnails 数组中。在模板中使用 v-for 循环渲染缩略图。