使用vue-pdf实现pdf预览翻页

1.先引入

npm install --save vue-pdf

vue3用 

npm install --save vue-pdf3

 

2.导入

import pdf from 'vue-pdf'

components: {pdf},

3.vue中使用

<pdf style="width:100%;height:90%;user-select: none;margin-top: 20px" :src="url+operationInfo.image" :page="pageNum" @num-pages="pageTotalNum = $event"></pdf>
    
data中加入两个参数，也可以吧src链接放入这里
pageTotalNum: 1, // 总页数
pageNum: 1, // 当前页数

4.分页实现

自定义连个按钮分别调用

      // 上一页
      prePage() {
        let page = this.pageNum;
        if (page > 1){
          page -= 1;
          this.pageNum = page;
        }else {
          this.$message.warning("已经是第一页了")
        }
      },
      // 下一页
      nextPage() {
        let page = this.pageNum;
        if (page < this.pageTotalNum){
          page+=1;
          this.pageNum = page;
        }else {
          this.$message.warning("已经是最后一页了")
        }
      },