vue之使用 vue-pdf插件
- 下载:
yarn add pdfjs-dist@2.5.207 -S 与 yarn add vue-pdf@4.2.0 -S
- 注意点:下载最新版本 4.3.0时,使用会报错
![在这里插入图片描述](https://img-blog.csdnimg.cn/5dacb9b2b92d4248a575682d76b2506d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiN5rGC5Lq6MA==,size_20,color_FFFFFF,t_70,g_se,x_16)
使用
html
currentPage- {{ currentPage}}
<button @click="change1">上一页</button>
<button @click="change2">下一页</button>
<pdf :src="file.url" :page="currentPage" @num-pages="pageCount=$event" @page-loaded="currentPage=$event">
</pdf>
js
import pdf from "vue-pdf";
export default {
name: 'CheckDocument',
components: {
pdf,
},
data() {
return {
file: {
url: `${window.location.origin}/test1.pdf`
},
currentPage: 1,
pageCount: 1,
};
},
change1() {
if (this.currentPage > 1) {
this.currentPage--
}
},
change2() {
if (this.currentPage < this.pageCount) {
this.currentPage++
}
}