vue项目中使用vue-pdf插件显示pdf文件
安装：npm install –save vue-pdf
组件：pdfCom.vue
<template>
<div class=”show-pdf”>
<div>
<pdf v-if=”pdfSrc” :src=”pdfSrc” :page=”currentPage” @num-pages=”pageCount=$event” @page-loaded=”currentPage=$event” @loaded=”loadPdfHandler”></pdf>
</div>
<div class=”page-cur” v-if=”pdfSrc”>
<span @click=”changePdfPage(0)”>上一页</span>{{currentPage}} / {{pageCount}}
<span @click=”changePdfPage(1)”>下一页</span>
</div>
</div>
</template>
<script>
import pdf from “vue-pdf”;
export default {
name: “Pdf”,
components: {pdf},
props: [“dochref”, “doctype”],
data() {
return {
typeValue: “”,
pdfSrc: “”,
currentPage: 1, // pdf文件页码
pageCount: 0, // pdf文件总页数
};
},
mounted() {
this.pdfSrc = “”;
this.pdfSrc = this.dochref;
},
methods: {
// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
changePdfPage(val) {
if (val===0 && this.currentPage <= this.pageCount && this.currentPage>1) {
this.currentPage–;
}
if (val===1 && this.currentPage < this.pageCount) {
this.currentPage++;
}
},
// pdf加载时
loadPdfHandler(e) {
this.currentPage = 1; // 加载的时候先加载第一页
}
},
watch: {
dochref(val) {
this.pdfSrc = val;
},
doctype(typeval) {
this.typeValue = typeval;
}
}
};
</script>
<style lang=”scss” scoped>
.show-pdf{
margin: 0 auto;
width: 100%;
.page-cur{
text-align: center;
span{
cursor: pointer;
}
}
}
</style>
调用组件：pdfModule.vue
<template>
<div>
<pdfCom doctype=”pdf” :dochref=”href”></pdfCom>
</div>
</template>
<script>
import pdfCom from “./pdfCom.vue”;
export default {
name: \’HelloWorld\’,
components: {pdfCom},
data() {
return {
href: “http://pdf文件.pdf”
}
},
mounted() {
}
}
</script>
版权声明：本文为yj-ang3141原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。