使用pdf.js窗口預覽pdf

一、業務場景

預覽pdf一般通過瀏覽器自帶的pdf預覽器就可以，但有時候需要窗口預覽或自定義操作，可以使用pdf.js操作

二、使用方法

1. 下載安裝

pdf.js需要構建后使用，我們可以直接下載安裝pdfjs-dist，這是構建好的版本

npm install pdfjs-dist

這里注意你的環境，新版本使用了可選鏈，空值合并和私有 class 字段/方法等，如果你的瀏覽器或node版本太低，建議下載低版本的pdfjs-dist，或嘗試引入leagcy文件夾下的兼容版本。

我這里是node12，安裝的是@2.6.347，保險起見同樣引入legacy兼容版本。

2. 引入使用【vue示例】

通過循環創建canvas來展示每一頁的內容，需要考慮容器和畫布的縮放比。

如果出現依賴引入和打包工具沖突的問題，可以手動把文件拷貝出來在html內直接引入，默認名稱也是pdfjsLib。

<template>
  <div id="app">
    <div class="pdf-container">
      <canvas
        v-for="index in totalPage"
        :key="index"
        :id="`canvas-${index}`"
      ></canvas>
    </div>
  </div>
</template>

// 路徑再確認下，版本不同路徑可能不同
import pdfjsLib from 'pdfjs-dist/legacy/build/pdf.min.js'

    pdfjsLib
      .getDocument(this.pdfPath) // 你的pdf路徑
      .promise.then((pdfDocument) => {
        this.totalPage = pdfDocument.numPages; // 頁碼
        for (let i = 1; i <= pdfDocument.numPages; i++) {
          pdfDocument.getPage(i).then((pdfPage) => {
            let viewport = pdfPage.getViewport({scale: 1.0});
            const containerWidth = document.body.offsetWidth; // 容器寬度
            let scaleViewport = pdfPage.getViewport({scale: containerWidth / viewport.width});
            let canvas = document.getElementById(`canvas-${i}`);
            canvas.width = viewport.width;
            canvas.height = viewport.height;
            let ctx = canvas.getContext("2d");
            let renderTask = pdfPage.render({
              canvasContext: ctx,
              viewport: scaleViewport,
            });
            return renderTask.promise;
          });
        }
      })
      .catch((err) => {
        console.log(err);
        console.error("PDF加載失敗");
      });

3. 其他問題

• 可能會出現字體缺失，部分空白問題
• 可能會出現worker運行目錄的問題