关于实战:实战在线浏览pdf文档

需要 : 在线浏览 pdf 文档.

解题 : 拿到 pdf 文档后, 应用 pdf.js 库, 将其转换成 canvas, 不就可以看了吗.

思路 :

读取指定的 pdf 文档, 获取文档的总页数;
依据总页数, 创立对应数量的 canvas 元素, 并以 id 标识;
将每页内容渲染到对应 id 的 canvas 中;

代码如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 在线浏览 pdf 文档 </title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.13.216/pdf.min.js"></script>
</head>
<body>  
  <div id="myContainer"></div>

  <script>
    function loadPDF (url) {
      // 思路:
      // 读取指定的 pdf 文档, 获取文档的总页数
      // 依据总页数, 创立对应数量的 canvas 元素, 并以 id 标识
      // 将每页内容渲染到对应 id 的 canvas 中

      pdfjsLib
      .getDocument('./a.pdf')
      .promise
      .then(function(pdf) {
        let num = pdf.numPages
        const id_prefix = 'ok_'

        createCanvas(num, id_prefix)
        renderCanvas(pdf, num, id_prefix)
      })
    }

    // 创立画布容器
    function createCanvas (num, idPrefix) {const container = document.getElementById('myContainer')

      for (let i = 1; i <= num; i++) {let canvas = document.createElement('canvas')

        canvas.id = `${idPrefix}${i}`

        container.appendChild(canvas)
      }
    }

    // 将文档内容渲染到画布
    function renderCanvas (pdf, num, idPrefix) {for (let i = 1; i <= num; i++) {
        pdf
          .getPage(i)
          .then(function(page) {
            var scale = 2
            var viewport = page.getViewport({scale: scale,})
            var canvas = document.getElementById(`${idPrefix}${i}`)
            var context = canvas.getContext('2d')
            canvas.height = viewport.height
            canvas.width = viewport.width

            var renderContext = {
                canvasContext: context,
                viewport: viewport
            }
            
            page.render(renderContext)
          })
      }
    }

    loadPDF('./a.pdf')
  </script>
</body>
</html>