PDF工具

如何使用 JavaScript 生成 PDF 文件

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Darrius Serrant

更新日期:7月 28, 2025

1.0 介紹

Adobe 開發了可移植文檔格式 (PDF)，旨在共享帶有文本和圖形的文檔。需要額外的程序才能在線打開 PDF 文件。在現代社會，PDF 文件對於重要文件非常重要。許多企業使用 PDF 文件來創建文檔和發票。開發人員生成和生成文檔的 PDF 以滿足客戶需求。由於現代庫的發展，創建 PDF 的能力從未如此簡單。在為項目選擇理想的庫時，我們必須考慮多個因素，包括庫的構建、讀取和轉換能力。

在本文中，我們將討論用於 PDF 創建的各種 JavaScript 庫。我們將探索 JS 庫的特點和使用案例，重點關注三個關鍵方面：

運行時環境兼容性
支持自定義字體和排版模塊
易用性

閱讀本文後，您將能夠選擇最適合您的 JavaScript 應用程序的 PDF 庫。我們還將介紹 IronPDF，一個功能強大且實用的 PDF 庫。

class="hsg-featured-snippet">

在 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年首次發布以來，它已獲得可觀的人氣，並持續更新至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();

JAVASCRIPT

2.2 pdfmake

pdfmake 是 PDFKit 的一個包裝庫。兩者之間的主要區別在於它們的編程範式：

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>

HTML

上面代碼的輸出顯示如下。

如何使用 JavaScript 生成 PDF 文件：圖 1

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>

HTML

以上代碼的輸出如下所示。

如何使用 JavaScript 生成 PDF 文件：圖 2

2.4 html2pdf

html2pdf 將 jsPDF 和 Html2Canvas 的功能結合到一個模塊中，以將網頁和模板轉換為 PDF 文件。

要將您的網站轉換為 PDF，請按以下步驟操作：

使用 NPM 在您的服務器上本地安裝 html2pdf JavaScript 庫，或將其包含在您的 HTML 代碼中，如下面的示例所示：
添加一個 "generate 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>

HTML

上面代碼的輸出如下所示。

如何使用 JavaScript 生成 PDF 文件：圖 3

2.5 IronPDF

IronPDF for Node.js 簡化了以編程方式創建和自定義 PDF 文檔的過程。由Iron Software開發的IronPDF，作為高效文件處理庫的可信提供商，為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

在上面的代碼中，最初定義了一段 JavaScript 代碼片段，將所有 <h1> 元素的顏色更改為紅色。然後，將此代碼集成到渲染選項中，同時啟用 JavaScript 執行。隨後，指定了包含文本為 "Hello World!!" 的 <h1> 元素的 HTML 內容。該 PDF 文檔是從此 HTML 內容生成的，定義在渲染選項中，確保 JavaScript 代碼在渲染過程中執行。最後，生成的 PDF 文檔保存為 "result1.pdf"。此代碼展示了 IronPDF 如何將動態 JavaScript 修改結合到 PDF 生成中，使開發人員能夠以編程方式創建定制化和互動式的 PDF 文檔。

如何使用 JavaScript 生成 PDF 文件：圖 4

3.0 結論

總之，上述 JavaScript 代碼在其他人使用時可能容易被誤用並存在潛在的安全風險。在實施此類代碼時，需要考慮未經授權訪問和數據安全漏洞的可能性。還應考慮不同瀏覽器和平台的兼容性問題，包括確保對可能缺乏所有所需功能的舊版本瀏覽器的支持。

相反，IronPDF Node.js 庫提供了增強的安全措施，以保護免受潛在威脅。它不依賴於特定的瀏覽器，並且兼容所有主要的瀏覽器。開發人員只需幾行代碼即可輕鬆創建和讀取 PDF 文件，使用 IronPDF。

The library provides various licensing options to cater to different developer needs, including a free trial license for developers and additional licenses available for purchase. Lite 套件售價為 $799，包括一個永久許可證、一年的產品支持和升級選項，無需支付經常性費用。這些授權可以在開發、測試和生產環境中使用。 Additionally, it is also available for other languages like C# .NET, Java, and Python. 訪問 IronPDF 網站了解更多詳情。