vue中使用vue-pdf实现多个pdf文件的循环输出,且每个PDf文件有自己的分页
问题描述:页面展示多个pdf文件,且每个PDF文件有自己的分页,分页之间不会互相干扰。问题解决方案:将分页设置为一个数组,先定义一个空的数组,然后获取总文件个数进行循环,每循环一次,在空数组中push当前页,总页数这些变量,然后在页面进行渲染。1. 定义空数组data () {return {pathList: [],currentArr: [],fileType: 'pdf', // 文件类型s
·
问题描述:页面展示多个pdf文件,且每个PDF文件有自己的分页,分页之间不会互相干扰。
问题解决方案:将分页设置为一个数组,先定义一个空的数组,然后获取总文件个数进行循环,每循环一次,在空数组中push当前页,总页数这些变量,然后在页面进行渲染。
1. 定义空数组
data () {
return {
pathList: [],
currentArr: [],
fileType: 'pdf', // 文件类型
src: '', // pdf文件地址
}
},
2. 获取总的文件个数进行循环
for (var i = 0; i < resp.data.data.length; i++) {
this.currentArr.push({
currentPage: 0, // pdf文件页码
pageCount: 0 // pdf文件总页数
})
}
3.进行页面渲染
<pdf :src="item.Path" :page="currentArr[index].currentPage" @num-pages="currentArr[index].pageCount=$event" @page-loaded="currentArr[index].currentPage=$event" @loaded="loadPdfHandler"></pdf>
<p class="arrow">
<span @click="changePdfPage(0,index)" class="turn" :class="{grey: currentArr[index].currentPage==1}">上一页</span>
<span>{{currentArr[index].currentPage}} / {{currentArr[index].pageCount}}</span>
<span @click="changePdfPage(1,index)" class="turn" :class="{grey: currentArr[index].currentPage==currentArr[index].pageCount}">下一页</span>
</p>
4.分页的点击事件
changePdfPage (val, index) {
if (val === 0 && this.currentArr[index].currentPage > 1) {
this.currentArr[index].currentPage--
}
if (val === 1 && this.currentArr[index].currentPage < this.currentArr[index].pageCount) {
this.currentArr[index].currentPage++
}
},
// pdf加载时
loadPdfHandler (e) {
// this.currentPage = 1 // 加载的时候先加载第一页
for (var i = 0; i < this.currentArr.length; i++) {
this.currentArr[i].currentPage = 1
}
},
更多推荐
已为社区贡献3条内容
所有评论(0)