PDF 工具

如何使用JavaScript生成PDF文件

发布 2023年五月23日

1.0 简介

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

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

运行时环境兼容性
支持自定义字体和排版模块
易用性
在本文结束时，您将能够为您的JavaScript应用程序选择最合适的PDF库。我们还将介绍IronPDF，这是一个强大且方便的PDF库。
在 Javscript 中生成 PDF 文件的步骤

2.0 图书馆

假设我们想让客户能够下载并打印我们的发票。我们还希望这份发票能够正确打印，并具有良好的格式。在这里，我们将研究一些最受欢迎的用于将此发票从 HTML 格式转换为 PDF 的库。

2.1 PDFKit

PDFKit 是在广泛的 JavaScript 生态系统中最早引入的 PDF 库之一。自2012年首次发布以来，它获得了广泛的欢迎，并持续接收到定期更新，截至2021年。PDFKit通过Webpack为Node.js和网页浏览器提供支持，尽管与此处讨论的其他库相比，可能稍显复杂。此外，正如我们将在比较中看到的，某些PDF库实际上是PDFKit的包装器。

支持自定义字体和图片嵌入，但没有高级API。此外，文档经常很复杂。正如您所预料的那样，创建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 文件。它根据您提供的格式创建并格式化一个PDF页面。 jsPDF 是 GitHub 上使用最广泛的 PDF 库，非常可靠且维护良好。它提供了易于使用的模块，适用于Node.js和网络浏览器，因为它们是根据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，请按照以下步骤操作：

在您的服务器上使用 NPM 本地安装 html2pdf JavaScript 库，或在您的 HTML 代码中包括它，如下例所示：
添加一个“生成PDF”功能，用于将网页的指定部分转换为PDF。您可以使用 getElementById 方法选择所需的部分。
在将其传递给html2pdf之前，通过向“opt”变量添加内容来自定义格式选项。这使您可以定义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() {
    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用于 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 执行。接着，一个包含 <h1> 元素的 HTML 内容，文本为 "Hello World"!!"指定。" PDF文档是从此HTML内容生成的，并使用定义的渲染选项，确保在渲染过程中执行JavaScript代码。最后，生成的 PDF 文档被保存为“result1.pdf”。此代码展示了IronPDF将动态JavaScript修改集成到PDF生成中的功能，使开发人员能够通过编程创建定制和交互式PDF文档。

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

3.0 结论

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

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

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

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

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