IRONSOFTWAREHOME
PDF 工具

如何使用 JavaScript 生成 PDF 文件

Curtis Chau
Curtis Chau
Updated: 2026年4月21日

1.0 介绍

Adobe 开发了便携式文档格式(PDF),用于共享包含文本和图形的文档。 需要额外的程序才能在线打开 PDF 文件。在现代世界中,PDF 文件对于重要文件非常重要。 为了创建文档和发票,许多企业使用 PDF 文件。 开发人员生成和创建文档的 PDF 以满足客户需求。 借助现代库,创建 PDF 变得前所未有的简单。 在为项目选择理想的库时,我们必须考虑多个因素,包括库的构建、读取和转换能力。

在本文中,我们将讨论为创建 PDF 的各种 JavaScript 库。 我们将探讨 JS 库的功能及其使用案例,重点关注三个关键方面:

  • 运行时环境兼容性
  • 对自定义字体和排版模块的支持
  • 使用的便利性

本文结束时,您将能够选择最适合您 JavaScript 应用程序的 PDF 库。 我们还将介绍 IronPDF,一个强大且方便的 PDF 库。

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();
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>
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>
HTML

上述代码的输出如下所示。

如何使用JavaScript生成PDF文件:图2

2.4 html2pdf

要将网页和模板转换为 PDF 文件,html2pdf 将 jsPDF 和 Html2Canvas 的功能结合为一个模块。

要将您的网站转换为 PDF,请按照以下步骤操作:

  1. 使用 NPM 在服务器上本地安装 html2pdf JavaScript 库,或在 HTML 代码中包含它,如下例所示:
  2. 添加一个"生成 PDF"函数,该函数将在指定网页段转换为 PDF 时调用。 可以使用getElementById方法选择所需的段。
  3. 在"opt"变量中添加并自定义格式选项,然后传递给 html2pdf。 这允许您定义各种 PDF 生成的设置。
  4. 在您的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>
HTML

下面是上述代码的输出。

如何使用JavaScript生成PDF文件:图3

2.5 IronPDF

IronPDF 适用于 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");
})();
JavaScript

在上述代码中,最初定义了一个JavaScript代码片段,将所有<h1>元素的颜色更改为红色。 然后将此代码集成到渲染选项中,并启用 JavaScript 执行。 随后,指定了包含一个<h1>元素的HTML内容,文本为"Hello World!!"。 从此 HTML 内容生成的 PDF 文档具有定义的渲染选项,确保在渲染过程中执行 JavaScript 代码。 最后,生成的 PDF 文档保存为"result1.pdf"。 此代码展示了 IronPDF 将动态 JavaScript 修改集成到 PDF 生成中的能力,使开发人员能够以编程方式创建自定义和交互式 PDF 文档。

如何使用JavaScript生成PDF文件:图4

3.0 结论

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

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

该库提供各种许可选项,以满足不同开发人员的需求,包括为开发人员提供[免费试用](trial-license)许可证和 额外许可证 可供购买。 Lite套餐,价格为$999,包括永久许可证、一年的产品支持和升级选项,无需支付经常性费用。 这些许可证可以用于开发、测试和生产环境。 此外,它还可以用于其他语言,如 C# .NET、Java 和 Python。 访问 IronPDF 网站以获取更多详细信息。

Curtis Chau
技术作家

Curtis Chau 拥有卡尔顿大学的计算机科学学士学位,专注于前端开发,精通 Node.js、TypeScript、JavaScript 和 React。他热衷于打造直观且美观的用户界面,喜欢使用现代框架并创建结构良好、视觉吸引力强的手册。

...
阅读更多

相关文章

Key in blue circle

立即获取免费的 30 天试用版密钥。

Your trial license will be sent to your email address

无任何限制。100% 解锁。无需信用卡。

OR
bullet_checked无需信用卡或创建账户无任何限制。100% 解锁。无需信用卡。
  • Logo Aetna
  • Logo NASA
  • Logo GE
  • Logo Porsche
  • Logo USDA
  • Logo Qatar
Join Millions of Engineers who’ve tried Iron Suite
预约您的免费现场演示
Booking Badge

深受全球数百万工程师信赖

Iron Software 的客户徽标
获取您的无义务咨询
填写下面的表格或通过sales@ironsoftware.com
您的资料将始终保密。
深受全球数百万工程师信赖
Iron Software 的客户徽标
立即获取您的免费30 天试用密钥。
无需信用卡或创建账户
C# 用于 PDF 的 NuGet 库
通过 NuGet 安装

版本: 2026.9

PM > Install-Package IronPdf
nuget.org/packages/IronPdf/
  1. 在解决方案资源管理器中,右键点击引用,管理 NuGet 包
  2. 选择浏览并搜索 “IronPDF”
  3. 选择包并安装
C# PDF DLL
下载 DLL

版本: 2026.9

或在此处下载 Windows 安装程序。

  1. 下载并解压 IronPDF 到您的解决方案目录中的 ~/Libs 之类的位置
  2. 在 Visual Studio 解决方案资源管理器中,右键点击引用。选择浏览,“IronPDF.dll”

$999 起