使用vue-pdf-embed显示多个页面
时间: 2025-06-20 18:02:32 浏览: 18
### 使用 `vue-pdf-embed` 显示多个 PDF 页面
为了在同一页面中显示 PDF 文档的多个页面,可以利用 `vue-pdf-embed` 组件来实现这一功能。通过循环渲染不同页码的组件实例,能够轻松展示多页内容。
以下是具体实现方法:
#### 安装依赖库
首先安装必要的 npm 包:
```bash
npm install vue-pdf-embed
```
#### 实现代码示例
创建一个 Vue 单文件组件用于加载并显示 PDF 文件的不同页面:
```vue
<template>
<div class="pdf-viewer">
<!-- 循环生成每一页 -->
<PdfEmbed v-for="(page, index) in visiblePages" :key="index"
:source="pdfSource"
:page="page"
@loading="handleLoading(index)"
@error="handleError"/>
</div>
</template>
<script>
import { PdfEmbed } from 'vue-pdf-embed';
export default {
name: 'MultiPagePDFViewer',
components: {
PdfEmbed,
},
props: {
pdfSource: String, // PDF 文件路径或 URL
totalPages: Number, // 总共要显示多少页,默认全部显示
},
computed: {
visiblePages() {
const total = this.totalPages || 10; // 默认最多显示前10页
return Array.from({ length: Math.min(total, 999) }, (_, i) => i + 1);
}
},
methods: {
handleLoading(pageIndex) {
console.log(`正在加载第 ${pageIndex + 1} 页`);
},
handleError(error) {
console.error('发生错误:', error);
}
}
};
</script>
<style scoped>
.pdf-viewer .vue-pdf-embed {
width: 100%;
height: auto;
}
</style>
```
此代码片段展示了如何遍历所需显示的页数范围,并为每一项创建一个新的 `PdfEmbed` 实例[^1]。注意这里设置了默认最大显示数量以防意外情况下的性能问题。
#### 关键点说明
- **分页处理**:通过计算属性 `visiblePages` 动态决定要显示哪些页面。
- **事件监听**:提供了两个回调函数分别用来监控加载进度以及可能发生的异常状况。
- **样式调整**:确保每个嵌入式的 PDF 查看器具有合适的尺寸比例以便于阅读体验良好。
阅读全文
相关推荐


















