如何自訂 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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
神秘的JavaScript：它的作用以及為什麼重要
Apr 09, 2025 am 12:07 AM
JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
誰得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。
如何實現視差滾動和元素動畫效果，像資生堂官網那樣？
或者：
怎樣才能像資生堂官網一樣，實現頁面滾動伴隨的動畫效果？
Apr 04, 2025 pm 05:36 PM
實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網（https://www.shiseido.co.jp/sb/wonderland/）中�...
JavaScript的演變：當前的趨勢和未來前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。
如何使用JavaScript將具有相同ID的數組元素合併到一個對像中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中將具有相同ID的數組元素合併到一個對像中？在處理數據時，我們常常會遇到需要將具有相同ID�...
JavaScript引擎：比較實施
Apr 13, 2025 am 12:05 AM
不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。
前端開發中如何實現類似 VSCode 的面板拖拽調整功能？
Apr 04, 2025 pm 02:06 PM
探索前端中類似VSCode的面板拖拽調整功能的實現在前端開發中，如何實現類似於VSCode...
