vue在线查看pdf文件

1.引入组件

npm install --save vue-pdf
1

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

3、引入组件到你的页面

<!-- 引入组件，ref：调用组件方法用  -->
<Resume ref="showResume"  :title="resumeTitle"></Resume>
import Resumefrom "@/views/business/common/resume";

//调用方法
toResume(resumeUrl){
			//resumeUrl简历地址
      this.$refs.showResume.show(resumeUrl);
    },

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

效果：