1.引入组件
npm install --save vue-pdf
2、pdf组件页面模板
<template>
<div class="scrollBox" >
<el-dialog :visible.sync="open" :top="1" width="50%" append-to-body>
<div slot="title">
<el-page-header @back="open =false" content="简历"></el-page-header>
</div>
<pdf v-for="item in numPages" :key="item" :src="pdfSrc" :page="item" ref="pdf"></pdf>
</el-dialog>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: "Resume",
components: {
pdf
},
data() {
return {
pdfSrc:null,
numPages: null,
open:false,
};
},
methods: {
show(url){
this.pdfSrc = url;
this.getNumPages();
this.open = true;
},
getNumPages() {
let loadingTask = pdf.createLoadingTask(this.pdfSrc)
loadingTask.promise.then(pdf => {
this.numPages = pdf.numPages;
}).catch(err => {
console.error('pdf 加载失败', err);
})
},
}
};
</script>
3、引入组件到你的页面
<!-- 引入组件,ref:调用组件方法用 -->
<Resume ref="showResume" :title="resumeTitle"></Resume>
import Resumefrom "@/views/business/common/resume";
toResume(resumeUrl){
this.$refs.showResume.show(resumeUrl);
},
</script>
效果: