效果
引入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页面那会体验很不好，我能想到的办法就是在一定范围内定义好宽度，然后设置其父盒子的比例