PDF 工具

如何使用 JavaScript 生成 PDF 文件

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

Darrius Serrant

已更新:七月 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

要将网页和模板转换为 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>

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，开发人员可以从包括 HTML、CSS、JavaScript、图像和其他文件类型在内的不同来源生成 PDF。这种灵活性使得创建根据特定需求量身定制的动态和吸引人的 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 内容。从此 HTML 内容生成的 PDF 文档具有定义的渲染选项，确保在渲染过程中执行 JavaScript 代码。最后，生成的 PDF 文档保存为“result1.pdf”。此代码展示了 IronPDF 将动态 JavaScript 修改集成到 PDF 生成中的能力，使开发人员能够以编程方式创建自定义和交互式 PDF 文档。

使用 JavaScript 生成 PDF 文件的方法：图 4

3.0 结论

总之，上面展示的 JavaScript 代码在被他人使用时可能容易被滥用和存在潜在的安全风险。在网站上实施此类代码时，考虑未经授权的访问和数据安全漏洞的可能性至关重要。还应考虑不同浏览器和平台的兼容性问题，包括确保对可能没有所有所需功能的旧浏览器的支持。

相比之下，IronPDF Node.js 库提供增强的安全措施，以抵御潜在威胁。它不依赖于特定的浏览器，并兼容所有主要的浏览器。开发人员只需几行代码即可轻松使用 IronPDF 创建和读取 PDF 文件。

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 网站以获取更多详细信息。