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, // pdf 总页数open:false,//开关};},methods: {show(url){//调用界面传过来简历的地址this.pdfSrc = url;// 计算pdf页码总数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){//resumeUrl简历地址this.$refs.showResume.show(resumeUrl);},</script>

效果：