PDF 工具

如何使用JavaScript生成PDF文件

发布 2023年五月23日

1.0 引言

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

在本文中，我们将讨论用于创建 PDF 的各种 JavaScript 库。我们将探讨 JS 库的功能和用例，重点关注三个关键方面：

运行环境兼容性
支持自定义字体和排版模块
易用性

本文结束时，您将能够为自己的 JavaScript 应用程序选择最合适的 PDF 库。我们还将介绍 IronPDF，这是一个功能强大、使用方便的 PDF 库。

在 Javscript 中生成 PDF 文件的步骤

使用 文本 method of the PDFKit library to insert 文本 into the PDF
利用 创建 PDF 方法
从 jsPDF 库中实例化 jsPDF 类，以创建 PDF
将配置传递给 html2pdf 方法
利用 将Html渲染为Pdf 方法

2.0 图书馆

比方说，我们希望客户能下载并打印我们的发票。我们还希望这张发票能正确打印，并具有良好的格式。下面我们将介绍一些最常用的库，用于将发票从 HTML 格式转换为 PDF 格式。

2.1 PDFKit

PDFKit 是广泛的 JavaScript 生态系统中最早引入的 PDF 库之一。自 2012 年首次发布以来，它获得了广泛的欢迎，并在 2021 年继续定期更新。PDFKit 通过 Webpack 为 Node.js 和 Web 浏览器提供支持，不过与本文讨论的其他库相比，其复杂程度可能略高。此外，正如我们将在比较中看到的，某些 PDF 库本质上是 PDFKit 的封装器。

它们支持自定义字体和图像嵌入，但没有高级应用程序接口。此外，文档通常比较复杂。正如你所预料的，它需要一些时间来适应，一开始，你会发现创建 PDF 并不是最简单的任务。

const PDFDocument = require('pdfkit');
const fs  = require('fs');
// create a document the same way as above
const doc = new PDFDocument;
// add your content to the document here, as usual
doc.text('Hello world!');
// get a blob when you're done
doc.pipe(fs.createWriteStream('Demo.pdf'));
doc.end();

const PDFDocument = require('pdfkit');
const fs  = require('fs');
// create a document the same way as above
const doc = new PDFDocument;
// add your content to the document here, as usual
doc.text('Hello world!');
// get a blob when you're done
doc.pipe(fs.createWriteStream('Demo.pdf'));
doc.end();

JAVASCRIPT

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() {
                var docDefinition = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                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() {
                var docDefinition = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                pdfMake.createPdf(docDefinition).print();
            }
        </script>
        <button onclick="downloadPdf()">Print pdf</button>
    </body>
</html>

HTML

上述结果的输出显示如下。

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

2.3 jsPDF

jsPDF 是一个开源软件包，专门使用纯 JavaScript 生成 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() {
                var pdf = new jsPDF({
                    orientation: 'p',
                    unit: 'mm',
                    format: 'a5',
                    putOnlyUsedFonts:true
                    });
                pdf.text("Hello World", 20, 20);
                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() {
                var pdf = new jsPDF({
                    orientation: 'p',
                    unit: 'mm',
                    format: 'a5',
                    putOnlyUsedFonts:true
                    });
                pdf.text("Hello World", 20, 20);
                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.在将格式选项传递给 html2pdf 之前，将其添加到 "opt "变量中，从而自定义格式选项。这样，您就可以定义生成 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() {
    const page = 'Hello World!';
    var opt = {
        margin:       1,
        filename:     'Demopdf.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { scale: 2 },
        jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // Choose the element that our invoice is rendered in.
    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() {
    const page = 'Hello World!';
    var opt = {
        margin:       1,
        filename:     'Demopdf.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { scale: 2 },
        jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // Choose the element that our invoice is rendered in.
    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 文档的过程。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 提供了广泛的功能以满足开发人员的需求。

使用以下工具生成 PDF 文件自定义 JavaScript请看下面的代码，它可以毫不费力地使 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 文件。

该库提供多种许可选项，以满足不同开发人员的需求，其中包括免费试用开发人员许可证和额外的许可证可供购买。售价为 $749 的精简版软件包包括一个永久许可证、一年的产品支持和升级选项，且无经常性费用。这些许可证可用于开发、暂存和生产环境。此外，还可用于其他语言，如 C# .NET, Java 和 Python.访问 IronPDF 更多详情，请访问网站。

< 前一页
如何在JavaScript中查看PDF文件

下一步 >
如何在JavaScript中打印PDF文件