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

首頁

web前端

js教程

如何自訂 PDF.js

Linda Hamilton

Oct 20, 2024 am 06:24 AM

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中文網其他相關文章！

陳述

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

JavaScript數據類型：瀏覽器和nodejs之間是否有區別？May 14, 2025 am 12:15 AM

JavaScript核心數據類型在瀏覽器和Node.js中一致，但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window，在Node.js中為global。 2)Node.js獨有Buffer對象，用於處理二進制數據。 3)性能和時間處理在兩者間也有差異，需根據環境調整代碼。

JavaScript評論：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

See all articles