如何使用 JavaScript 生成 PDF 文件
1.0 引言
Adobe 開發了可攜式文件格式 (PDF)，其目的是為了分享包含文字和圖形的文件。 在線開啟PDF文件需要額外的程序。在當今世界，PDF文件對於重要文件至關重要。 許多企業使用 PDF 文件來建立文件和發票。 開發人員製作並產生符合客戶需求的PDF文件。 由於現代庫，創建 PDF 文件從未如此簡單。 在為專案選擇理想的庫時，我們必須考慮許多因素，包括庫的建置、讀取和轉換能力。
本文將探討用於建立 PDF 的各種 JavaScript 程式庫。 我們將探討 JS 函式庫的特性和用例，並專注於以下三個關鍵面向：
- 執行時間環境相容性
- 支援自訂字體和排版模組
- 易用性
閱讀本文，您將能夠為您的 JavaScript 應用程式選擇最合適的 PDF 程式庫。 我們還將介紹 IronPDF，這是一個功能強大且方便的 PDF 庫。
使用 JavaScript 產生 PDF 檔案的步驟
- 使用 PDFKit 庫的
text方法將文字插入 PDF 文件中。 - 在 JavaScript 中使用 pdfmake 函式庫的
createPdf方法。 - 從 jsPDF 庫中實例化 jsPDF 類別以建立 PDF 檔案。
- 將配置傳遞給 html2pdf 庫的
html2pdf方法。 - 使用 IronPDF 庫中的
RenderHtmlAsPdf方法
2.0 庫
假設我們希望客戶能夠下載並列印我們提供的發票。 我們也希望這份發票能正確列印，格式良好。 接下來我們將介紹一些最受歡迎的程式庫，用於將此發票從 HTML 格式轉換為 PDF 格式。
2.1 PDFKit
PDFKit 是最早引進到龐大的 JavaScript 生態系統中的 PDF 函式庫之一。 自 2012 年首次發布以來，PDFKit 已獲得廣泛認可，截至 2021 年仍在定期更新。 PDFKit 透過 Webpack 同時支援 Node.js 和 Web 瀏覽器，儘管與本文討論的其他函式庫相比，它的複雜度可能略高一些。 此外，正如我們將在比較中看到的那樣，某些 PDF 庫本質上是 PDFKit 的封裝。
支援自訂字體和圖像嵌入； 但是，目前還沒有進階 API。 此外，文件編制通常也很複雜。 正如你所預料的，這需要一些時間來適應，而且一開始你會發現，創建 PDF 並不是一項最簡單的任務。
// Importing required modules for PDF generation
const PDFDocument = require('pdfkit');
const fs = require('fs');
// Create a new PDF document
const doc = new PDFDocument();
// Add your content to the document here
doc.text('Hello world!');
// Pipe the document to a writable stream
doc.pipe(fs.createWriteStream('Demo.pdf'));
// Finalize the PDF file
doc.end();// Importing required modules for PDF generation
const PDFDocument = require('pdfkit');
const fs = require('fs');
// Create a new PDF document
const doc = new PDFDocument();
// Add your content to the document here
doc.text('Hello world!');
// Pipe the document to a writable stream
doc.pipe(fs.createWriteStream('Demo.pdf'));
// Finalize the PDF file
doc.end();2.2 pdfmake
PDFKit 的一個封裝庫叫做 pdfmake。 兩者之間的主要區別在於它們的程式設計範式：
pdfmake 採用宣告式方法，而 PDFKit 則遵循傳統的命令式技術。 因此，使用 pdfmake 庫可以更輕鬆地專注於 PDF 生成的所需功能，而無需花費時間指導庫如何實現特定結果。
然而，值得注意的是，並非所有看起來有希望的事物都是完美無缺的。 使用 Webpack 並嘗試將自訂字體與 pdfmake 整合可能會導致問題。 遺憾的是，網路上關於這個問題的資訊有限。 即使不使用 Webpack，您仍然可以輕鬆複製 Git 儲存庫並執行字體嵌入腳本。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
</head>
<body>
<script type="text/javascript">
function downloadPdf() {
// Define the document structure
var docDefinition = {
content: [
{ text: "Hello world" }
],
defaultStyle: {}
};
// Create and print the PDF
pdfMake.createPdf(docDefinition).print();
}
</script>
<button onclick="downloadPdf()">Print pdf</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
</head>
<body>
<script type="text/javascript">
function downloadPdf() {
// Define the document structure
var docDefinition = {
content: [
{ text: "Hello world" }
],
defaultStyle: {}
};
// Create and print the PDF
pdfMake.createPdf(docDefinition).print();
}
</script>
<button onclick="downloadPdf()">Print pdf</button>
</body>
</html>上述程式碼的輸出結果如下所示。
2.3 jsPDF
jsPDF 是一個完全使用純 JavaScript 產生 PDF 檔案的開源軟體包。 它會建立一個 PDF 頁面，並根據您提供的格式對其進行格式化。 jsPDF 是 GitHub 上使用最廣泛的 PDF 庫，它具有很高的可靠性和良好的維護性。 它為 Node.js 和 Web 瀏覽器提供了易於使用的模組，因為它們是按照 AMD 模組標準導出的。
關於 PDFKit，其 API 遵循命令式程式設計範式，這使得設計複雜的佈局變得具有挑戰性。 至於字體嵌入，唯一需要的額外步驟是將字體轉換為 TTF 文件，這是一個簡單的過程。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script>
function generatePDF() {
// Create a new instance of jsPDF
var pdf = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a5',
putOnlyUsedFonts: true
});
// Add text to the PDF
pdf.text("Hello World", 20, 20);
// Save the PDF
pdf.save('Demopdf.pdf');
}
</script>
</head>
<body>
<button onclick="generatePDF()">Print Pdf</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script>
function generatePDF() {
// Create a new instance of jsPDF
var pdf = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a5',
putOnlyUsedFonts: true
});
// Add text to the PDF
pdf.text("Hello World", 20, 20);
// Save the PDF
pdf.save('Demopdf.pdf');
}
</script>
</head>
<body>
<button onclick="generatePDF()">Print Pdf</button>
</body>
</html>上述程式碼的輸出結果如下所示。
2.4 html2pdf
為了將網頁和範本轉換為 PDF 文件，html2pdf 將 jsPDF 和 Html2Canvas 的功能合併到一個模組中。
若要將您的網站轉換為 PDF 文件，請按照以下步驟操作：
- 使用 NPM 在伺服器本機安裝 html2pdf JavaScript 程式庫，或像下面的範例一樣將其包含在 HTML 程式碼中：
- 新增一個"產生 PDF"函數，該函數將被呼叫以將網頁的指定部分轉換為 PDF。 您可以使用
getElementById方法選擇所需的片段。 - 在將"opt"變數傳遞給 html2pdf 之前，透過將其新增至該變數中來自訂格式選項。 這樣您就可以定義各種 PDF 生成設定。
- 在 HTML 頁面上新增一個按鈕，點選該按鈕即可觸發
generatePDF功能。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
function generatePDF() {
// Define the HTML content
const page = 'Hello World!';
// PDF options
var opt = {
margin: 1,
filename: 'Demopdf.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Convert HTML to PDF
html2pdf().set(opt).from(page).save();
}
</script>
</head>
<body>
<button onclick="generatePDF()">Print Pdf</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
function generatePDF() {
// Define the HTML content
const page = 'Hello World!';
// PDF options
var opt = {
margin: 1,
filename: 'Demopdf.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Convert HTML to PDF
html2pdf().set(opt).from(page).save();
}
</script>
</head>
<body>
<button onclick="generatePDF()">Print Pdf</button>
</body>
</html>以下是上述程式碼的輸出結果。
2.5 IronPDF
IronPDF for Node.js 簡化了以程式設計方式建立和自訂 PDF 文件的過程。 IronPDF 由高效能文件處理庫的可靠提供者 Iron Software 開發，為在 Node.js 環境中產生 PDF 提供了一個強大的解決方案。 它與 Node.js 專案無縫集成，為開發人員提供強大的工具，可輕鬆產生、格式化和編輯 PDF。
IronPDF 庫具有廣泛的功能，包括拆分和合併新建或現有 PDF 文件中的頁面、讀取和編輯現有 PDF 文件、從 PDF 文件中提取圖像、向 PDF 文件添加文字、圖形、書籤、浮水印、頁首和頁腳，所有這些都不需要 Acrobat Reader。 可以從 CSS 和 CSS 媒體檔案產生 PDF 文件。 IronPDF 允許使用者建立、上傳和更新新的和現有的 PDF 表單。
IronPDF for Node.js 的主要功能：
- 多功能 PDF 產生：IronPDF 支援開發者從多種來源產生 PDF，包括 HTML、CSS、JavaScript、映像和其他文件類型。這種靈活性使得創建動態且美觀的 PDF 文件成為可能，並可根據特定需求進行客製化。
- 進階文件自訂：IronPDF 使開發人員能夠透過頁首、頁尾、附件、數位簽章、浮水印和書籤等功能來增強 PDF 文件。 這樣就可以建立具有豐富內容和互動式元素的專業級 PDF 檔案。
- 安全功能：IronPDF 提供強大的安全功能，以保護 PDF 檔案免受未經授權的存取。 開發人員可以實施密碼、數位簽章、元資料和其他安全性設定等安全措施，以保護 PDF 文件中包含的敏感資訊。
- 最佳化效能：IronPDF 旨在實現最佳效能，具有完整的多執行緒和非同步支援。 這確保了高效的 PDF 生成，使其適用於對效能要求極高的關鍵任務應用。
功能齊全：IronPDF 提供 50 多種功能，用於建立、格式化和編輯 PDF 文檔，為所有與 PDF 相關的任務提供全面的解決方案。 從基本文件產生到進階自訂和安全，IronPDF 提供廣泛的功能來滿足開發人員的需求。
要使用自訂 JavaScript來產生 PDF 文件，請查看以下程式碼，它可以輕鬆地使 HTML 內容更具吸引力：
import { PdfDocument } from "@ironsoftware/ironpdf";
(async () => {
// Define the JavaScript code to change text color to red
const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";
// Create rendering options object
const renderOptions = {
enableJavaScript: true,
javascript: javascriptCode,
};
// HTML content to be rendered
const htmlContent = "<h1>Hello World!!</h1>";
// Render HTML content to a PDF
const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });
// Save the PDF with the executed JavaScript
await pdf.saveAs("result1.pdf");
})();import { PdfDocument } from "@ironsoftware/ironpdf";
(async () => {
// Define the JavaScript code to change text color to red
const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";
// Create rendering options object
const renderOptions = {
enableJavaScript: true,
javascript: javascriptCode,
};
// HTML content to be rendered
const htmlContent = "<h1>Hello World!!</h1>";
// Render HTML content to a PDF
const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });
// Save the PDF with the executed JavaScript
await pdf.saveAs("result1.pdf");
})();在上面的程式碼中，首先定義了一段 JavaScript 程式碼片段來更改所有元素的顏色。<h1>元素變為紅色。 然後將此程式碼整合到渲染選項中，並啟用 JavaScript 執行。 隨後，包含以下內容的 HTML 內容<h1>指定包含文字"Hello World!!"的元素。 PDF 文件是根據此 HTML 內容，使用定義的渲染選項產生的，確保 JavaScript 程式碼在渲染過程中執行。 最後，將產生的 PDF 文件儲存為"result1.pdf"。 這段程式碼展示了 IronPDF 將動態 JavaScript 修改融入 PDF 產生的功能，使開發人員能夠以程式設計方式建立自訂和互動式 PDF 文件。
3.0 結論
總之，上述 JavaScript 程式碼在被他人使用時可能容易被濫用，且有潛在的安全風險。 在網站上實施此類程式碼時，請務必考慮未經授權的存取和資料安全漏洞的可能性。此外，還應考慮不同瀏覽器和平台之間的相容性問題，包括確保支援可能不具備所有必要功能的舊版瀏覽器。
相較之下，IronPDF Node.js 庫提供了增強的安全措施來抵禦潛在威脅。 它不依賴特定瀏覽器，並且與所有主流瀏覽器相容。 只需幾行程式碼，開發人員即可使用 IronPDF 輕鬆建立和讀取 PDF 文件。
該庫提供多種授權選項以滿足不同開發者的需求，包括面向開發者的免費試用許可證和可供購買的額外許可證。 Lite 套餐售價為$799 ，包含永久授權、一年的產品支援和升級選項，且無任何續費。 這些許可證可用於開發、測試和生產環境。 此外，它還支援其他語言，如C# .NET 、 Java和Python 。 請造訪IronPDF網站以了解更多詳情。
免費開始
免費開始
預訂免費直播演示
無需信用卡或建立帳號
