如何自訂 PDF.js

Linda Hamilton原創: 2024-10-20 06:24:29940瀏覽

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。

文件

Html API 文件
Markdown API 文件
知識庫

現場演示

模組捆綁測試
腳本包測試

連結：

GitHub
NPM

以上是如何自訂 PDF.js的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html es6 npm angular if for Directory using public JS default constructor this github ui bug iframe

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：掌握 Vue Router .roject 中已棄用的 `addRoutes` 方法下一篇：掌握 Vue Router .roject 中已棄用的 `addRoutes` 方法

看更多