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 官方网站 – 底层渲染引擎的文件