VUE实现PDF在线阅读

1、安装npm

npm install --save vue-pdf

2、HTML部分

<div v-if="dataForm.pdfUrl !== '' & dataForm.pdfUrl !== null & dataForm.pdfUrl !== undefined">
<div class="pdf">
<pdf :src="pdfOption.src"
:page="pdfOption.currentPage"
@num-pages="pdfOption.pageCount=$event"
@page-loaded="pdfOption.currentPage=$event"
@loaded="loadPdfHandler">
</pdf>
</div>
<div class="text-center">
<el-button @click="changePdfPage(0)" size="small" :disabled="pdfOption.currentPage == 1">上一页</el-button>
<el-button @click="dialogVisible = false" size="small" disabled>单前第{{pdfOption.currentPage}}页，共{{pdfOption.pageCount}}页</el-button>
<el-button @click="changePdfPage(1)" size="small" :disabled="pdfOption.currentPage==pdfOption.pageCount">下一页</el-button>
</div>
</div>

3、JS部分

<script>
import pdf from 'vue-pdf'
export default {
data () {
return {
// pdf 数据
pdfOption: {
currentPage: 0,
pageCount: 0,
fileType: 'pdf',
src: ''
}
}
},
methods: {
// 获取文章详细
getInfo () {
this.$http.get(`/zs/zscms/getArticleDetailByArticleId?id=${this.dataForm.id}`).then(({ data: res }) => {
this.dataForm = {
...this.dataForm,
...res
}
this.pdfOption.src = res.pdfUrl
}).catch(() => {})
},
// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
changePdfPage (val) {
if (val === 0 && this.pdfOption.currentPage > 1) {
this.pdfOption.currentPage--
}
if (val === 1 && this.pdfOption.currentPage < this.pdfOption.pageCount) {
this.pdfOption.currentPage++
}
},
// pdf加载时
loadPdfHandler (e) {
this.pdfOption.currentPage = 1
}
},
created () {
if (this.$route.query.id === undefined) {
this.$router.push({ path: '/index' })
} else {
this.dataForm.id = this.$route.query.id
this.getInfo()
}
document.title = '文章详细'
},
components: {
pdf
}
}
</script>

最后

以上就是认真小霸王为你收集整理的VUE实现PDF在线阅读的全部内容，希望文章能够帮你解决VUE实现PDF在线阅读所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。