vue2.x项目中使用pdf.js转canvas以及踩过的坑

最近有个需求是在vue2.x项目中使用pdf.js，其实以前也用过 pdf.js，以前是用 pdf.js把整个详情页面导出为 pdf，这次是需要用 pdf.js把后台的 pdf转为图片显示在页面上。我是把 pdf 转为 canvas 显示的。

废话不多说，先说用法：

1. 先安装 pdf.js

npm install pdfjs-dist

我看网上也有说在官网下载项目，再把 pdf.js的包放进自己项目的，但我们要用npm安装，所以需要下载的自己去官网下载：
pdf.js 官网 link

2. 引入 pdf.js 和 pdf.js worker

import * as  pdfjsLib from 'pdfjs-dist'
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'

3. 在 created 中使用：

created() {
    pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
    let winW = document.documentElement.clientWidth;

	// pdf 的 localhost地址是把用来做测试的pdf放在了项目里，实际运用可以用后台返回的线上地址
    let pdfUrl = 'http://localhost:8080/helloworld.pdf';
    
    let loadingTask = pdfjsLib.getDocument(pdfUrl);

    loadingTask.promise.then((pdf) => {
      console.log(pdf);
      let pageNum = pdf.numPages
      this.totalPage = pageNum;
      for (let i = 1; i <= pageNum; i++) {
        pdf.getPage(i).then((page) => {
          let viewport = page.getViewport({ scale: 1.5, });
          let scale = (winW / viewport.width).toFixed(2)
          let scaledViewport = page.getViewport({ scale: 1.5, })
          let canvas = document.getElementById('the-canvas' + i)
          let context = canvas.getContext('2d')
          canvas.height = scaledViewport.height
          canvas.width = scaledViewport.width
          let renderContext = {
            canvasContext: context,
            viewport: scaledViewport
          }
          let renderTask = page.render(renderContext)
          renderTask.promise.then(() => {
          })
        })
      }
    }, function (reason) {
      console.error(reason)
    })
  },

别忘了html容器 —— canvas：

<canvas v-for="item in totalPage" :key="item" :id='"the-canvas" + item' class="pdf-content"></canvas>

使用方法说完了，再说说踩过的坑：

1. loadingTask 是 promise，所以要用官网例子的写法：
   

2. page.render() 也是代码 promise，官网的例子中没有写 .prmise，在我项目中报错了，加了 .promise这个写法才正常：
   

3. 如果你写前端页面的时候没有后台联调，用自己的本地 pdf做demo，那你要注意本地pdf的位置！！！
   我看网上说是放在 static文件夹中，但是我们项目没有 static，是用public文件夹做输出，所以放在了 public中，引用的时候直接是 localhost 地址：

// 此处引用直接是http://localhost:8080下的pdf，不用写public，因为public文件夹是输出的文件夹
let pdfUrl = 'http://localhost:8080/helloworld.pdf';

自己随便找个本地的 pdf 放在public中就行了，此处我用的是官网示例中的 helloworld.pdf。

4. 不算是坑，算是小经验吧：
   
   在做图片显示的时候：page.getViewport({ scale: 1.5, }) 中scale 是控制 canvas的大小的，以为是几倍显示，因为scale设为1的话图片显示有点小，所以我用了1.5，这个根据自己需要调整。

可能还有一些别的坑我没遇到，欢迎遇到的小伙伴分享，避免大家踩坑。

希望此文能对你有所帮助。

个人微信公众号：侦探小禾子，闲聊育儿生活星座塔罗牌，野生法考通过者免费法律咨询，欢迎关注！