admin管理员组

文章数量:1649150

问题描述：页面展示多个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
      }
    },

 

本文标签： 自己的文件多个分页vue

版权声明：本文标题：vue中使用vue-pdf实现多个pdf文件的循环输出，且每个PDf文件有自己的分页 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1729505618a1203592.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。