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，這個根據自己需要調整。

可能還有一些別的坑我沒遇到，歡迎遇到的小夥伴分享，避免大家踩坑。
希望此文能對你有所幫助。