如何自訂 PDF.js

發佈於2024-11-08

How to customize PDF.js

PDF.js 是一個很棒的開源項目，它經常更新並且不斷添加新功能，但是從外觀上看它很醜陋，或者可以說它看起來已經過時了。從 PDF.js 取得最新的 PDF 功能和修復，但在演示方面擁有流暢的外觀怎麼樣？

PdfJsKit 的pdf 檢視器並不引人注目，它不會直接更改PDF.js 的程式碼，它只是在iframe 中包含PDF.js，並在運行時覆蓋HTML、JS 和CSS，以提供光滑的現代外觀和更好的ui結構和可用性以及新功能。這樣我們就可以輕鬆地將 PDF.js 更新到最新版本並獲得所有錯誤修復和改進。

其他基於 PDF.js 的 pdf 檢視器通常不會更新預設外觀，而那些通常會因為分離成元件但部分實作它們或提供不良/部分 API 而錯過功能。

入門

將軟體包安裝到您的專案：

npm install pdfjskit

當安裝套件（或版本更新）時，PdfJsKit使用的資源（css、映像等）將自動從node_modules\pdfjskit\dist\pdfjskit複製到public\pdfjskit。您專案的 public 子目錄是 Web 資源的常見位置，但如果您的 JS 框架具有不同的目錄結構，您可以將資源移至其他位置。

預設情況下，PdfJsKit 從相對於主機頁面的 pdfjskit 子目錄載入資源，但您可以透過將自訂libraryPath 選項傳遞給 PdfViewer 建構子來變更此路徑。

用法

import PdfViewer from "pdfjskit";

var pdfViewer = new PdfViewer({
  documentUrl: "pdfjskit/sample.pdf",
  width: "80%",
  height: 720,
  resizable: true,
  language: "en-US",
  theme: "slate, classic-dark"
});

pdfViewer.render(document.getElementById("container"));

請注意，NPM 套件包含 ES6 模組 pdfjskit.min.mjs，GitHub dist/pdfjskit 目錄和此處提供的開發人員套件中也提供了腳本版本 pdfjskit.min.js。

在有 Vite 的純 JS 專案中使用 PdfJsKit

您可以將任何 JS 框架（React、Vue、Angular、Svelte、Blazor 等）與 PdfJsKit 一起使用，但是為了簡單起見，在這篇文章中，我將展示普通 JS 專案的用法。

對於普通的JS項目，我推薦使用Vite，這樣你就可以輕鬆地從HTML檔案中的模組導入：

建立Vite專案範本：

npm create vite@latest

選擇設定：

✔ Project name: … pdfjskit-vite-example
✔ Select a framework: › Vanilla
✔ Select a variant: › JavaScript

將建立以您的專案名稱命名的子目錄，請執行以下操作：
```
cd pdfjskit-vite-example
npm install
npm install pdfjskit
```

編輯index.html並將內容替換為：


  
    
    
    PdfJsKit Vite Example

現在您可以運行開發 Web 伺服器了：
```
npm run dev
```
將顯示：
```
➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h   enter to show help    
```
使用 CTRL 鍵點選本機 URL 以啟動瀏覽器。
您將看到頁面中呈現了 PDF Viewer。