1.引入组件
javascript
复制代码
npm install --save vue-pdf
2、pdf组件页面模板
javascript
复制代码
<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、引入组件到你的页面
javascript
复制代码
<!-- 引入组件，ref：调用组件方法用 -->
<Resume ref="showResume" :title="resumeTitle"></Resume>
import Resumefrom "@/views/business/common/resume";
//调用方法
toResume(resumeUrl){
//resumeUrl简历地址
this.$refs.showResume.show(resumeUrl);
},
</script>
效果：
