应用场景
需要展示的pdf文件内容,通过按钮进行上下页的展示与翻页
解决办法
1.安装vue-pdf:npm i vue-pdf --save -dev
2.具体实现:
<template>
<div class="pdf" v-show="fileType === 'pdf'">
<pdf
ref="pdf"
:src="pdfUrl"
:page="currentPage"
@num-pages="pageCount=$event"
@page-loaded="currentPage=$event"
@loaded="loadPdfHandler">
</pdf>
<div class="bottom-btn" >
<p class="arrow">
<span @click="changePdfPage(0)" class="turn">上一页</span>
{{currentPage}} / {{pageCount}}
<span @click="changePdfPage(1)" class="turn">下一页</span>
</p>
</div>
</div>
</template>
<script>
import pdf from "vue-pdf";
export default {
components:{
pdf
},
data() {
return {
pdfUrl:'',// pdf文件地址
currentPage: 0, // pdf文件页码
pageCount: 0, // pdf文件总页数
fileType: 'pdf', // 文件类型
}
},
mounted(){
this.title = this.$route.query.data.name
const toast = this.$toast.loading({
duration: 0,
message: '加载中...',
forbidClick: true,
loadingType: 'spinner'
});
this.pdfUrl = this.$route.query.data.operationUrl
},
methods:{
// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
changePdfPage (val) {
// console.log(val)
if (val === 0 && this.currentPage > 1) {
this.currentPage--
}
if (val === 1 && this.currentPage < this.pageCount) {
this.currentPage++
}
},
loadPdfHandler(e){
this.$toast.clear();
this.currentPage = 1 // 加载的时候先加载第一页
}
}
};
</script>
<style scoped>
.pdf{
position: relative;
margin-bottom: 60px;
}
.bottom-btn{
position: fixed;
width: 80%;
height: 120px;
bottom: 0;
padding: 0 10%;
background: #ffffff;
z-index: 999;
}
.arrow{
text-align: center;
}
</style>