vue2 vue-pdf 实现单页预览 缩略图展示

### 实现 PDF 单页预览与缩略图功能 对于在 Vue2 中使用 `vue-pdf` 插件实现 PDF 文件的单页预览以及缩略图展示，可以遵循如下方法： #### 安装依赖包 首先，在项目中安装必要的 npm 包。这包括 `vue-pdf` 及其可能需要的相关依赖。 ```bash npm install vue-pdf --save ``` #### 创建组件结构 创建一个新的 Vue 组件用于处理 PDF 的显示逻辑。此组件负责加载 PDF 文档并渲染指定页面及其对应的缩略图。 #### 编写代码示例 下面是一个简单的代码片段展示了如何利用 `vue-pdf` 来完成上述目标[^1]。 ```html <template> <div class="pdf-container"> <!-- 预览区域 --> <div v-for="(page, index) in pages" :key="index" @click="changePage(index)"> <pdf :src="url" :page="index + 1" style="display:inline-block;width:100%;height:auto;" ></pdf> </div> <!-- 缩略图列表 --> <ul class="thumbnails"> <li v-for="(thumb, idx) in thumbnails" :key="idx" @click="selectThumbnail(idx)"> <img :src="thumb.src"/> </li> </ul> </div> </template> <script> import pdf from 'vue-pdf' export default { components: { pdf }, data() { return { url: '/path/to/pdf', // 替换成实际路径 numPages: undefined, currentPage: 1, pages: [], thumbnails: [] } }, methods: { loadPdf() { const loadingTask = pdf.createLoadingTask(this.url); loadingTask.promise.then(pdf => { this.numPages = pdf.numPages; for (let i = 1; i <= this.numPages; ++i){ let pageRenderingPromise = pdf.getPage(i).then(page => { var scale = 0.5; var viewport = page.getViewport({scale}); // 使用 canvas 渲染每一页作为缩略图 var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); // 将 canvas 转换为 image 并存入数组 this.thumbnails.push({ src: canvas.toDataURL() }); }); this.pages.push(pageRenderingPromise); } Promise.all(this.pages).then(() => console.log('All Pages Loaded')); }).catch(reason=>console.error(reason)); }, changePage(newIndex) { this.currentPage = newIndex + 1; }, selectThumbnail(thumbnailIdx) { this.changePage(thumbnailIdx); } }, mounted(){ this.loadPdf(); } } </script> <style scoped> .pdf-container{ display:flex; } .thumbnails li img{ width:80px;height:100%; cursor:pointer; } </style> ``` 这段代码实现了基本的 PDF 页面浏览和缩略图切换功能。通过点击不同的缩略图可以选择要查看的具体页面。 #### 注意事项 - 上述代码中的 URL 应该替换为真实的 PDF 文件地址。 - 对于大型文档或者网络资源，考虑加入缓存机制提高性能。 - 如果遇到跨域问题，则需配置服务器端响应头允许 CORS 请求。