安裝：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>