vue在线查看pdf文件

1.引入组件

npm install --save vue-pdf

2、pdf组件页面模板

                                              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);      })    },  }};

3、引入组件到你的页面

import Resumefrom "@/views/business/common/resume";//调用方法toResume(resumeUrl){//resumeUrl简历地址      this.$refs.showResume.show(resumeUrl);    },

效果：