html2pdf.js：使用 JavaScript 在客戶端將 HTML 轉換為 PDF

從網頁內容生成 PDF 是幾乎每個網頁應用程式都會遇到的需求，但要正確實作卻出了名地困難。html2pdf.js（GitHub 上的 eKoopmans/html2pdf.js）透過提供一個簡單的客戶端 JavaScript 函式庫解決了這個問題，它可以直接在瀏覽器中將 HTML 元素轉換為 PDF 文件，無需伺服器。

由 Erik Koopmans 建立，並建立在 html2canvas 和 jsPDF 成熟的基礎上，該函式庫透過提供一個常見問題的直接解決方案，已累積超過 10,000 個 GitHub 星號。其 API 簡單得令人難以置信：選擇一個 HTML 元素，呼叫轉換函式，就能得到一個保留原始內容視覺外觀的可下載 PDF。

該函式庫的受歡迎來自於它消除了對伺服器的依賴。傳統的 PDF 生成需要無頭瀏覽器或執行 Puppeteer、Prince 或 wkhtmltopdf 的伺服器端渲染引擎。有了 html2pdf.js，一切都在使用者的瀏覽器中進行，減少了基礎設施成本，消除了伺服器回應時間中的 PDF 生成延遲，並且由於無需額外的伺服器軟體而簡化了部署。

轉換管線

html2pdf.js 透過一個定義明確的兩階段轉換管線運作：

flowchart LR
    A[HTML 元素] --> B[html2canvas\nDOM 到 Canvas]
    B --> C[Canvas 影像\n渲染輸出]
    C --> D{分頁\n偵測}
    D -->|單頁| E[jsPDF\n嵌入影像]
    D -->|多頁| F[jsPDF\n分割與嵌入]
    E --> G[PDF 文件]
    F --> G
    G --> H[下載 / 預覽]

此管線確保生成的 PDF 忠實再現原始 HTML 的視覺外觀，包括 CSS 樣式、自訂字型、影像和複雜版面。Canvas 中介層意味著漸層、陰影和變形等 CSS 功能都會保留在 PDF 輸出中。

設定選項

實際應用

在正式環境中，html2pdf.js 被廣泛應用於各種應用程式。電子商務平台使用它直接從訂單確認頁面生成可列印的發票和裝箱單。預訂系統建立可下載的票券和行程單。報表儀表板產生資料視覺化和圖表的 PDF 快照。證書生成器產生帶有收件人姓名和完成日期的樣式化 PDF 證書。

該函式庫處理透過 CSS @font-face 載入的自訂字型、使用 CSS Grid 和 Flexbox 的響應式版面，以及像含合併儲存格的表格等複雜巢狀元素。對於需要生成具有可選取文字或進階排版的 PDF 的應用程式，html2pdf.js 提供了平衡檔案大小和影像保真度的輸出品質選項。

推薦的外部資源

• html2pdf.js GitHub 儲存庫 – 原始碼、範例和社群問題
• html2canvas 專案頁面 – 底層 HTML 渲染引擎文件

常見問題

什麼是 html2pdf.js？ html2pdf.js 是一個 JavaScript 函式庫，可在瀏覽器中完全將 HTML 內容轉換為 PDF 檔案，無需任何伺服器端依賴。它結合了 html2canvas（將 HTML 元素渲染為畫布影像）和 jsPDF（生成最終 PDF 文件），將兩個函式庫包裝成一個簡單統一的 API。

html2pdf.js 如何將 HTML 渲染為 PDF？ html2pdf.js 分兩步進行。首先，html2canvas 透過解析 DOM 並套用 CSS 樣式，將目標 HTML 元素捕獲為畫布影像。然後，jsPDF 將該畫布影像嵌入到 PDF 文件中。

客戶端 PDF 生成有哪些限制？ 客戶端 PDF 生成無法完美處理互動元素、嵌入影片或複雜的 CSS 版面。非常大的頁面可能會達到瀏覽器記憶體限制，基於像素的方法意味著生成的 PDF 中的文字無法選取。

html2pdf.js 能生成多頁 PDF 嗎？ 是的，html2pdf.js 支援多頁 PDF 生成。當內容超過一頁時，可以根據頁面高度自動分割。開發人員也可以手動控制分頁。

html2pdf.js 適合用於正式環境應用嗎？ 是的，html2pdf.js 已達到正式環境可用等級，被數以千計的應用程式用於生成發票、收據、報告、票券和證書。

延伸閱讀

• html2pdf.js 在 GitHub 上 – 包含文件和範例的儲存庫
• html2canvas 官方網站 – 底層渲染引擎的文件