隨著 Web 技術的發(fā)展，有很多需要將 HTML 內(nèi)容轉換為 PDF 文檔并下載的場景，比如常見的收據(jù)、發(fā)票、電子報告、對賬清單、文檔翻譯等等。
本文將研究當前比較流行的基于 Node.js 技術棧的 HTML 轉 PDF 庫：Puppeteer、jsPDF 和 PDFKit，大綱如下：
- Puppeteer vs jsPDF vs PDFKit 功能對比
1.Puppeteer
1.1.使用 Puppeteer 生成 PDF
Puppeteer 是谷歌開發(fā)的一個 Node.js 庫，為控制無頭（或完整）Chrome 或 Chromium 瀏覽器提供了一個高級 API。它是最流行的開源 HTML 到 PDF 轉換器，支持 HTML、CSS 和 Javascript。
Puppeteer 允許您自動化Web瀏覽器中的各種任務，例如 Web 抓取、網(wǎng)站測試、截圖創(chuàng)建和 PDF 生成。它利用 Chrome 或 Chromium Web 瀏覽器的功能將 HTML 內(nèi)容呈現(xiàn)為 PDF 文件。
下面使用 Puppeteer 快速初始化一個項目：
nvm use 20.6.1
mkdir puppeteer-demo
cd puppeteer-demo
npm init -y
npm install puppeteer
touch index.js
在 index.js 中添加如下代碼：
import puppeteer from 'puppeteer';
(async () => {
const browser = await puppeteer.launch({
headless: 'new',
});
const page = await browser.newPage();
await page.setContent(
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
body {
display: grid;
place-items: center;
margin: 0;
background-color: #ccc;
min-height: 100vh;
}
</style>
<h1>Hello, Puppeteer!</h1>
</body>
</html>`
);
await page.pdf({ path: 'result.pdf', format: 'A4' });
await browser.close();
})();
在上面的代碼中，我們導入 Puppeteer 庫，啟動無頭 Chromium 瀏覽器，并在瀏覽器中創(chuàng)建一個新頁面。我們還會根據(jù)頁面內(nèi)容和指定選項（如路徑和格式）生成 PDF，生成完成后關閉瀏覽器并釋放資源。
1.2.優(yōu)點
- 您可以完全控制要在 PDF 中包含網(wǎng)頁的哪些部分。您可以指定具體的元素、部分或整個頁面
- Puppeteer 提供了自定義選項，如指定頁面大小、邊距、頁眉和頁腳，使您可以根據(jù)特定需求定制 PDF 布局
- Puppeteer 可以捕捉 PDF 中的交互元素，如超鏈接和表單字段，適用于生成交互式 PDF 文件。
1.3.缺點
- 使用 Puppeteer 生成的 PDF 有時可能比使用類似庫生成的PDF要大。這會影響下載時間和存儲成本。
- 使用 Puppeteer 渲染復雜或大型網(wǎng)頁可能會消耗資源，導致PDF生成變慢和內(nèi)存使用增加。
2.PDFKit
PDFKit 是 Javascript 生態(tài)系統(tǒng)中最古老和最成熟的 PDF庫 之一。目前仍得到良好維護并定期更新。該庫通常使用 Node.js 在服務器端環(huán)境中創(chuàng)建和操作 PDF 文檔。它允許您通過定義每個頁面的內(nèi)容、布局和格式來以程序方式生成PDF文件。
PDFKit 提供了用于 PDF 文檔生成的高級 API，并支持各種功能，使其成為創(chuàng)建自定義 PDF 的多功能工具。作為 PDFKit 的包裝器，已開發(fā)出多個 PDF 庫，支持自定義字體和圖像嵌入。
2.1.使用 PDFKit 生成 PDF
讓我們來快速初始化一個 PDFKit 項目：
nvm use 20.6.1
mkdir pdfkit-demo
cd pdfkit-demo
npm init -y
npm install pdfkit
touch index.js
在 index.js 中添加如下代碼：
import fs from 'node:fs';
import PDFDocument from 'pdfkit';
const doc = new PDFDocument();
const stream = fs.createWriteStream('example.pdf');
doc.pipe(stream);
doc.fontSize(12).text('Hello, PDFKit!', { align: 'center' });
doc.end();
stream.on('finish', () => {
console.log('success');
});
執(zhí)行 node index.js 后，可以看到 PDF 可以生成生成，并觸發(fā) finish 事件的回調(diào)函數(shù)執(zhí)行，打印出了 success 。
2.2.優(yōu)點
- 由于它是開源的，并由社區(qū)積極維護，PDFkit 可以不斷改進和更新
- PDFKit 可對 PDF 文檔的內(nèi)容、布局和格式進行精細控制。您可以根據(jù)自己的特定需求創(chuàng)建高度定制的 PDF 文檔
- PDFKit 是根據(jù)用戶請求、數(shù)據(jù)或其他服務器端進程動態(tài)生成 PDF 的絕佳選擇
2.3.缺點
- 創(chuàng)建具有高級布局和功能的復雜 PDF 可能具有挑戰(zhàn)性，可能需要充分了解庫的 API
- 對于新手來說，PDFKit 的學習曲線可能比更直接的 HTML 到 PDF 轉換工具更陡峭，因為它需要對文檔結構進行更多的手動控制
3.jsPDF
jsPDF 是一個流行的 Javascript PDF 生成器，允許用戶動態(tài)在 Web 瀏覽器中生成 PDF 文件。這個庫維護良好，穩(wěn)定易用，并且有豐富的文檔。
jsPDF 在客戶端操作，非常適合在 Web 應用程序中生成 PDF ，無需在服務器端生成。它可以修改現(xiàn)有布局，并允許用戶通過自定義來控制他們的 PDF。還可以用來編輯現(xiàn)有的 PDF 文檔或從頭創(chuàng)建一個，包括圖像、表格和形狀等內(nèi)容。
3.1.使用 jsPDF 生成 PDF
示例中使用官方提供的 CDN 地址 https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>
<body>
<style>
body {
display: grid;
place-items: center;
margin: 0;
background-color: #ccc;
min-height: 100vh;
}
</style>
<h1>Hello, jsPDF!</h1>
<script>
document.addEventListener("DOMContentLoaded", function () {
const pdf = new window.jsPDF();
const element = document.body;
pdf.html(element, {
callback: function (pdf) {
// Save the PDF to a file or display it
pdf.save("output.pdf");
},
});
});
</script>
</body>
</html>
文檔地址：http://raw.githack.com/MrRio/jsPDF/master/docs/index.html
3.2.優(yōu)點
- jsPDF 完全在客戶端（頁面）上運行，這使它成為在 Web 應用程序中生成 PDF 的一個很好的選擇，而無需外部服務
- jsPDF 相對易于使用，尤其是對于基本的 PDF 生成任務。您只需幾行 Javascript 代碼即可創(chuàng)建 PDF 文檔
- 由于 jsPDF 是一個 Javascript 庫，它可以與 Web 應用程序無縫集成，并可以與其他 Javascript 庫和框架一起使用
3.3.缺點
- 在客戶端生成 PDF 可能會耗費大量資源，尤其是大型或復雜文檔。這會影響瀏覽器性能或導致內(nèi)存消耗問題
- jsPDF 在現(xiàn)代 Web 瀏覽器中得到廣泛支持，但在舊的瀏覽器或具有較少 Javascript 支持的環(huán)境中可能無法按預期工作
- 與 PDFKit 等服務器端 PDF 生成庫不同，jsPDF 具有有限的高級功能和能力。它可能不適用于復雜的PDF要求。
4.Puppeteer、jsPDF 和 PDFKit 功能比較
為便于大家參考，下面總結了 Puppeteer、jsPDF 和 PDFKit 庫在 PDF 生成、文件大小、瀏覽器集成和社區(qū)支持方面的比較：
| Puppeteer | jsPDF | PDFKit |
|---|
| PDF生成 | 從 HTML 和網(wǎng)頁內(nèi)容生成 PDF | 從 HTML 和 SVG 內(nèi)容生成 PDF | 從頭開始創(chuàng)建 PDF |
| 文件大小 | 無法控制 PDF 大小 | 無法控制 PDF 大小 | 提供對 PDF 文件大小的控制 |
| 瀏覽器集成 | 為網(wǎng)頁渲染提供無頭 Chrome 集成 | 沒有瀏覽器集成 | 沒有瀏覽器集成 |
| 社區(qū)支持和更新 | 活躍的社區(qū)支持和更新 | 活躍的社區(qū)支持和更新 | 活躍的社區(qū)支持和更新 |
5.結論
當為 HTML 轉 PDF 需求選擇實現(xiàn)方案時，可以參考以上實現(xiàn)方案。如果你想從頭開始生成 PDF，PDFKit 可能是你最好的選擇。要通過 HTML 或者 SVG 內(nèi)容快速轉換為 PDF，jsPDF 可能更合適。對應網(wǎng)頁渲染和交互式內(nèi)容，強烈建議你選擇 Puppeteer。
最后，方案選擇在很大程度上還取決于你的項目類型、規(guī)范及開發(fā)者個人喜好。
該文章在 2023/11/16 20:57:45 編輯過
400 186 1886
