现在公司把外部网都限制死了，导致笔记都不能做，为知笔记这么好使的东西居然不给用，好气哦~ 但是做笔记的习惯不能丢！暂且把blog当笔记使吧~

1
2
3
4
5
6
<template>
  <div class="pdf_container bg_gray" ref="pdfWrap">
    <canvas ref="pdfCanvas"></canvas>
    <!-- <div ref="pdfSvg"></div> -->
  </div>
</template>
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
114
115
116
117
118
119
120
121
122
123

/**
 * 提供三个event, 父级直接调用, 触发按钮请自行在父级定义。
 * onLarger 放大
 * onSmaller 缩小
 * onRotate 旋转
 */
import PDF from 'pdfjs-dist';
// PDF.disableWorker = true;
PDF.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min');
export default {
  name: 'appliClaimPdf',
  props: {
    url: String
  },
  data() {
    return {
      pages: 0,
      scale: 1.5, // 缩放倍数
      rotate: 0, // 旋转角度
      pdf: null // pdf本身
    };
  },
  watch: {
    url(newData, oldData) {
      // url异步拿取
      if (newData) {
        this.previewPDF();
      }
    }
  },
  created() {
    if (!this.url) return;
    this.previewPDF();
  },
  methods: {
    onLarger() {
      if (this.scale > 3) return;
      this.$store.commit('globalLoading', true);
      this.scale += 0.25;
      this.getPage(this.pdf, this.scale, this.rotate, 1, 1);
    },
    onSmaller() {
      if (this.scale < 0.7) return;
      this.$store.commit('globalLoading', true);
      this.scale -= 0.25;
      this.getPage(this.pdf, this.scale, this.rotate, 1, 1);
    },
    onRotate() {
      if (this.rotate > 360) {
        this.rotate = 0;
        return;
      }
      this.$store.commit('globalLoading', true);
      this.rotate += 90;
      this.getPage(this.pdf, this.scale, this.rotate, 1, 1);
    },
    previewPDF() {
      this.$store.commit('globalLoading', true);
      let _this = this;
      // 引入pdf.js的字体
      let CMAP_URL = 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/';
      let loadingTask = PDF.getDocument({
        url: _this.url,
        // url: 'http://localhost:8080/api/upload/wechat/pdf/IID00921683.pdf', // 本地调试
        cMapUrl: CMAP_URL,
        cMapPacked: true
      }).then(pdf => {
        _this.pdf = pdf;
        let numPages = pdf.numPages;
        let pageNumber = 1;
        _this.getPage(pdf, _this.scale, _this.rotate, 1, 1);
      });
    },
    getPage(pdf, scale, rotate, pageNumber, numPages) {
      let _this = this;
      pdf.getPage(pageNumber).then(page => {
        // 方法一 canvas (页面会白屏闪烁)
        // 获取DOM中为预览PDF准备好的canvasDOM对象
        let canvasWrap = _this.$refs.pdfWrap;
        let canvas = _this.$refs.pdfCanvas;
        let viewport = page.getViewport(scale, rotate);

        canvas.style.height = viewport.height + 'px';
        canvas.style.width = viewport.width + 'px';
        // canvas画大两倍，解决绘画模糊
        canvas.height = viewport.height * 1.5;
        canvas.width = viewport.width * 1.5;

        let ctx = canvas.getContext('2d');
        let renderContext = {
          canvasContext: ctx,
          viewport
        };

        page.render(renderContext).then(() => {
          pageNumber += 1;
          if (pageNumber <= numPages) {
            _this.getPage(pdf, scale, rotate, pageNumber, numPages);
          }
        });

        // 方法二 svg（显示画质会比canvas高,弊端：ios展示不了非宋体的字）
        // let svgWrap = _this.$refs.pdfSvg;
        // let viewport = page.getViewport(scale, rotate);

        // svgWrap.style.width = viewport.width + 'px';
        // svgWrap.style.height = viewport.height + 'px';

        // page.getOperatorList().then(function(opList) {
        //   var svgGfx = new PDF.SVGGraphics(page.commonObjs, page.objs);
        //   svgGfx.getSVG(opList, viewport).then(function(svg) {
        //     svgWrap.innerHTML = '';
        //     svgWrap.appendChild(svg);
        //   });
        // });

        _this.$store.commit('globalLoading', false);
      });
    }
  }
};