vue-pdf 预览pdf 显示缩略图

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

安装 pdfjs-dist 和 vue-pdf 依赖：
npm install pdfjs-dist vue-pdf --save

在 Vue 组件中引入依赖：
import pdfjsLib from 'pdfjs-dist';
import VuePdf from 'vue-pdf';

在组件中使用 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 循环渲染缩略图。