使用vue-pdf，并把它封装成一个文件后，第一次调用是没有问题的，问题是当你切换pdfUrl的时候，pdf并不会马上置换掉，再点击一次的时候才会置换成新的pdfurl
由于父子组件存在调用,出现了,pdf预览每次只能查看一个,别的打开空白：
安装依赖
npm install --save vue-pdf
将vue-pdf封装成一个组件
<template>
<div>
v-for="i in numPages"
:key="i"
:src="src"
:page="i"
></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: 'vuePdf',
components: {
},
props: {
pdfSrc: {
type: String,
require: true
}
},
data() {
return {
src: '',
numPages: undefined,
}
},
mounted() {
this.loadPDF(this.pdfSrc)
},
methods:{
loadPDF(url){
this.src=pdf.createLoadingTask(url)
this.src.promise.then(pdf => {
this.numPages = pdf.numPages;//获取pdf页数
});
},
//很重要,父组件关闭前,清空子组件的值,不然第二次预览打开空白
resetPageNum(){
this.numPages=undefined
}
}
}
</script>
父组件中使用
html部分:先引入注册,在使用
import vuePdf from './pdf'
components: { vuePdf}
<van-popup v-model="show" round position="bottom" :close-on-click-overlay="false" :style="{ height: '80%' }">
<div>
<vue-pdf ref="mypdf" :pdf-src="fileUrl" :key="fileId"></vue-pdf>
</div>
</van-popup>
//关闭pdf弹窗的方法
closePopup(){
//调用子组件的重置数据方法,解决空白问题
this.$refs.mypdf.resetPageNum()
this.show=false
},
//预览的方法,传入id通过接口查询pdf的url
showpdf(id) {
this.fileUrl = https://aliyuncs.com/applet/fb3e9155150141da94e3b22271dc06.pdf
this.fileId = id
this.show = true
},
解决方案：
通过子组件定义清空数据的方法,在父组件关闭子组件弹窗前调用,让子组件重新刷新页面,重新渲染.
