pdf浏览器预览

近期工作上需要在浏览器上展示pdf格式的文件，经过查找，pdf.js最为合适。
由于是大屏的预览，并没有一次性全部展示出来，只是展示第一页，通过上一页下一页的控制，来浏览pdf。
效果如下：

pdf文件预览

代码如下，没有粘贴css，canvas需要指定宽高：

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
<body>
  <div class="pdf-container">
    <canvas id="the-canvas"></canvas>
    <div class="arrow-btns">
      <button onclick="pdfViews.setPageIndex(pdfViews.pageIndex-1)" class="prev-btn btn"><img src="./assets/images/arrow-right.svg" class="arrow-img"></button>
      <button onclick="pdfViews.setPageIndex(pdfViews.pageIndex+1)" class="next-btn btn"><img src="./assets/images/arrow-right.svg" class="arrow-img"></button>
    </div>
  </div>
</body>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.3.122/pdf.min.js" integrity="sha512-CGtesFWoCAxW8xV1S4wdev6uWmGhkEBtTGJsQLkT75ab0eVyx0RTOdGxHk9hFVV/OlF6ZyCoukfPdiZPpAiUtw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
<script src="./assets/js/pdf.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.3.122/pdf.worker.min.js"
  integrity="sha512-Am3j2LUWSl4PsujPgLgHi4kztn5rVozTiX9YkaSuwzYCOIumNISgFBRh5Ux6ZWFB5+Cu5buNtbNwmaWLteyB9w=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
  let params = parseQueryString(window.location.search)
  let pdfViews, pdfPath='./assets/data/0927.pdf'
  
  class PDFViews{
    scale = 1
    pageIndex = 2
    pageSize=0
    pdf=null
    canvasW=0
    canvasH=0
    dom={
      prevBtn: document.querySelector('.prev-btn'),
      nextBtn: document.querySelector('.next-btn'),
      pageSize: document.querySelector('.pageSize'),
      pageIndex: document.querySelector('.pageIndex'),
      container: document.querySelector('.pdf-container'),
      canvas: document.querySelector('#the-canvas')
    }
    constructor(pdf, params){
      this.pdf = pdf
      this.canvasH = params.h
      this.canvasW = params.w
      this.setPageSize(pdf.numPages)

    }

    setPageSize(val){
      this.pageSize = val
      if(this.dom.pageSize){
        this.dom.pageSize.innerHTML = this.pageSize
      }
    }
    setPageIndex(val=1){
      if(val>0 && val<= this.pageSize){
        this.pageIndex = val
        if(this.dom.pageIndex){
          this.dom.pageIndex.innerHTML = this.pageIndex
        }
        this.randerPdf(this.pdf, this.scale, this.pageIndex)
      }
      if(val>=this.pageSize){
        this.dom.nextBtn.disabled = true
      }else if(val <= 1){
        this.dom.prevBtn.disabled = true
      }else{
        if(this.dom.nextBtn.disabled == true){
          this.dom.nextBtn.disabled = false
        }
        if(this.dom.prevBtn.disabled == true){
          this.dom.prevBtn.disabled = false
        }
      }
      
      
    }
    async randerPdf(pdf, scale, pageIndex) {
      let page = await pdf.getPage(pageIndex)
      var viewport = page.getViewport({ scale: 1, });
      let scaleX = this.canvasW/viewport.width
      let scaleY = this.canvasH/viewport.height
      let scaledViewport = page.getViewport({ scale: Math.min(scaleX,scaleY), })
      // var outputScale = window.devicePixelRatio || 1;
      var outputScale = 1;

      var canvas = this.dom.canvas;
      var context = canvas.getContext('2d');

      // canvas.width = Math.floor(viewport.width * outputScale);
      // canvas.height = Math.floor(viewport.height * outputScale);
      canvas.width = this.canvasW
      canvas.height = this.canvasH

      var transform = outputScale !== 1
        ? [outputScale, 0, 0, outputScale, 0, 0]
        : null;

      var renderContext = {
        canvasContext: context,
        transform: transform,
        viewport: scaledViewport
      };
      page.render(renderContext);
    }
  }
  (async () => {
    let loadingTask = pdfjsLib.getDocument(pdfPath)
    const pdf = await loadingTask.promise
    pdfViews = new PDFViews(pdf, params)
    pdfViews.setPageIndex()
  })()

  function parseQueryString(url) {
    url = url == null ? window.location.href : url
    let search = url.substring(url.lastIndexOf('?') + 1)
    if (!search) {
      return {}
    }
    return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
  }
</script>

每次点击上一页或者下一页，都会在canvas重新渲染。
当然也可以根据pdf.numPages总页数创建多个canvas，一次性加载（最好懒加载的方式）。