效果

引入vue-pdf

npm install --save vue-pdf

vue版本
"vue": "^2.6.11",
"vue-pdf": "^4.3.0",

1.在使用页面引入

import pdf from "vue-pdf";

components: {  //组件
    searchTop,
    wordLabelPop,
    pdf
  }

2.使用

<pdf ref="pdf" 
	@progress="pdfload($event)" //pdf加载进度，不用可无视
	:src="pdfObj.pdfUrl"   //pdf在线地址
	:page="pdfObj.currentPage"   //当前显示页数
	:style="{width: imgSize+'%'}">  //动态控制当前页大小，不用可无视
</pdf>

----常用pdf 回调
page: 当前显示的页数，比如第一页page=1
rotate ： 旋转角度，比如0就是不旋转，+90，-90 就是水平旋转。
progress ：当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了。
page-loaded ：页面加载成功的回调函数，不咋能用到。
num-pages ：总页数
error ：加载错误的回调
link-clicked：单机pdf内的链接会触发。


注意：
我是单页显示，如果你想一次性显示多页，那就是这样
<pdf  v-for="i in numPages" :key="i"  :src="url" :page="i"></pdf>	

需求：一次性加载完pdf后，实现预览当前单页的pdf

所有只需要控制相应的页数就行
重点：
检测页数变化，区间控制显示

// 根据当前页数定位到相应目录
        this.activeLink = this.allListData.findIndex(item => {
          return this.pagination.startPage >= item.startPage && this.pagination.startPage <= item.endPage
        });

注意点：vue-pdf是canvas渲染，注意的地方是做自适应大小的时候会一直重绘当前pdf显示，如果是一次性渲染出所有pdf页面那会体验很不好，我能想到的办法就是在一定范围内定义好宽度，然后设置其父盒子的比例