vue-pdf 动态切换src时不刷新或不生效的解决方法
使用vue-pdf一个页面内,动态切换src时不刷新或不生效
参考如下:
子组件PdfViewer
<template>
<div class="fill-height pdf-container">
<template v-if="src && numberOfPages">
<pdf
v-for="page in numberOfPages"
:key="`${fileName}-${page}`"
:src="src"
:page="page"
/>
</template>
</div>
</template>
import pdf from 'vue-pdf'
export default {
props: {
fileName: {
type: String,
required: true
}
},
components: {
pdf
},
data() {
return {
src: null,
numberOfPages: 0
}
},
created() {
this.src = pdf.createLoadingTask(this.fileName, { withCredentials: false });
},
mounted() {
this.src.promise
.then((pdf) => {
this.numberOfPages = pdf.numPages;
})
.catch((err) => {
console.error('pdf加载失败', err);
});
},
}
主组件代码如下:
<PdfViewer v-if="selectedFileName" :fileName="selectedFileName" />
onFileNameSelected(fileName) {
this.selectedFileName = null
setTimeout(() => {
this.selectedFileName = fileName
}, 0)
}
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
评论已关闭