zhaoxiaoqiang
2022-10-11 cb74707f3a8d61a884343c57e63f9cfdaf7434b1
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!--
 * @Author: 小明丶
 * @Date: 2020-06-23 16:31:23
 * @LastEditors: zxq
 * @LastEditTime: 2022-06-16 16:43:01
 * @Description: 
--> 
<template>
  <div class="pdf" v-show="fileType === 'pdf'">
    <v-navbar :title="$route.query.tit"></v-navbar>
    <!-- <c-pdf pdfurl="http://t.finlean.com/jttech/M00/01/04/rBEX617ytmKAEKtoAAb34lu1n7Q194.pdf"></c-pdf> -->
    <embed :src="pdfUrl" :style="{height: '100vh'}" style="width: 100%" />
    <!-- <pdf
      :src="pdfSrc"
      :page="currentPage"
      @num-pages="pageCount=$event"
      @page-loaded="currentPage=$event"
      @loaded="loadPdfHandler"
    ></pdf>
    <div class="arrow">
     
      <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">上一页</span>
      {{currentPage}} / {{pageCount}}
     
      <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">下一页</span>
    </div> -->
  </div>
</template> 
<script>
// import CPdf from "../../components/pdf/cpdf";
//import pdf from "vue-pdf";
// import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
export default {
  metaInfo: {
    meta: [
      { charset: "utf-8" },
      {
        name: "viewport",
        content:
          "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes"
      }
    ]
  },
  components: { CPdf }, // props: ['pdfSrc'],
  data() {
    return {
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      fileType: "pdf", // 文件类型
      pdfSrc: "" // pdf文件地址
    };
  },
  created() {
    //this.pdfUrl = pdf.createLoadingTask({ url: data.url, CMapReaderFactory })
    //this.pdfSrc = this.$route.query
    // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
    //this.pdfUrl = './static/web/viewer.html?'
    
    //this.pdfUrl = './static/web/viewer.html?file=' + this.$route.query.url, +'PDF'
    this.pdfUrl = './static/web/viewer.html?file=' + 'https://t.finlean.com/jttech/M00/01/04/rBEX617ytmKAEKtoAAb34lu1n7Q194.pdf', +'PDF'
    
    //this.pdfSrc = pdf.createLoadingTask({url:this.$route.query.agrUrl,CMapReaderFactory});
  },
  
  
  methods: {
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage(val) {
      // console.log(val)
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
        //console.log(this.currentPage);
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
        //console.log(this.currentPage);
      }
    }, // pdf加载时
    loadPdfHandler(e) {
      this.currentPage = 1; // 加载的时候先加载第一页
    }
  }
};
</script>
 
<style lang="less" scoped>
  .pdf{
    canvas{
      height: 90vh;
    }
    .arrow{
      &{
        position: fixed;
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background: #fcfcfc;
        bottom: 0;
        span:nth-of-type(1){
          display: inline-block;
          width: 30vw;
          text-align: left;
        }
        span:nth-of-type(2){
          display: inline-block;
          width: 30vw;
          text-align: right;
        }
      }
    }
  }
</style>