vue-pdf展示pdf

使用vue-pdf插件展示pdf文档

1<template>
2  <div class="citicBankDoc">
3     <el-dialog
4     :show-confirm-button="false" 
5      :visible.sync="showCiticDialog"
6      :show-close="false"
7     > 
8     <div class="iframe_con">
9      <div class='mask'>
10        <pdf  v-for="i in totalPage" :key="i"  :src="loadingTask" :page="i"></pdf>     
11        <div class="btns" v-if='showDialogButton'>
12        <el-button type="primary" @click="handleCiticBankDialog" size="small">确认</el-button>
13      </div>
14      </div>
15    </div>
16   </el-dialog>
17  </div>
18</template>
19
20<script>
21import pdf from 'vue-pdf';
22export default {
23  name: 'citicBankDocPage',
24  props: ['showCiticDialog'], 
25  data () {
26    return {
27      showDialogButton: false,
28      totalPage: null,
29      loadingTask: ''
30    };
31  },
32  mounted () {
33    var loadingTask = pdf.createLoadingTask(window.common.$store.getters.getCiticPolicyUrl);
34    console.log(loadingTask, 'l');
35    loadingTask.promise.then(pdf => {
36      this.loadingTask = loadingTask;
37      this.totalPage = pdf.numPages;
38    }).catch((err) => {
39      console.log(err, '加载失败');
40    });
41    this.handleSureButton();
42  },
43  components: {
44    pdf
45  },
46  watch: {
47  },
48  compuetd: {
49  },
50  beforeDestory () {
51
52  },
53  methods: {
54    //  处理中信银行弹窗按钮先显示
55    handleSureButton () {
56      var that = this;
57      window.setTimeout(()=>{
58        that.showDialogButton = true;
59      }, 2000);
60    },
61    // 控制中信银行的弹窗,关闭操作在父页面
62    handleCiticBankDialog () {
63      this.$emit('handleCiticDialogClose');
64    }
65  }
66};
67</script>
68
69<style lang="less"  scoped>
70.citicBankDoc{
71   ::v-deep.el-dialog{
72     margin-top:3vh!important;
73    height: 90%;
74    width:70%;
75    overflow-y: auto;
76     .btns{
77      text-align:center!important;
78      button{
79       margin-right: 15px;
80       margin-bottom:15px;
81      }
82    }
83   
84  }
85    ::v-deep.el-dialog__body{
86    position:relative!important;
87    height: 90%!important;
88  }
89    .pdf-iframe{
90    width: 100%;
91    height: 100%;
92    overflow-y:auto
93}
94}
95</style>
96