vue-pdf插件。这是一个基于PDF.js的Vue组件，用于在Vue应用中预览PDF文件；也可以用来实现搜索和高亮功能。
安装插件
npm install vue-pdf --save
在Vue组件中引入并使用插件（下面仅是预览功能）
<template>
<div class="water-eport" v-loading="loading">
<vuePdf :src="fileUrl" v-for="i in pageNum" :key="i" :page="i"></vuePdf>
</div>
</template>
<script>
import vuePdf from 'vue-pdf';
export default {
components: { vuePdf },
props: {
fileVisible: {
type: Boolean,
default: false
},
fileUrl: {
type: String,
default: ""
},
},
mounted() {
this.openDatail();
},
watch: {
fileVisible: {
handler(val) {
this.openDatail();
},
deep: true,
immediate: true
},
},
methods: {
openDatail() {
if (this.fileVisible) {
this.visible = true;
this.loading = true;
const loadingTask = vuePdf.createLoadingTask(this.fileUrl);
loadingTask.promise.then(pdf => {
this.loading = false;
this.pageNum = pdf.numPages;
}).catch(err => {
this.loading = false;
this.visible = false;
this.$message.error('PDF加载失败')
});
}
},
}
}
</script>
