如何自訂 PDF.js-js教程-PHP中文網

如何自訂 PDF.js

Linda Hamilton

發布： 2024-10-20 06:24:29

原創

831 人瀏覽過

How to customize PDF.js

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

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

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

入門

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

npm install pdfjskit

登入後複製

當安裝套件（或版本更新）時，PdfJsKit使用的資源（css，映像等）將自動從node_modulespdfjskitdistpdfjskit複製到publicpdfjskit。您專案的 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並將內容替換為：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>PdfJsKit Vite Example</title>
  </head>
  <body>

    <div id="container"></div>

    <script type="module">
      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"));
    </script>

  </body>
</html>

登入後複製

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