PDF 工具

如何用JavaScript创建PDF文件

发布 2023年六月13日

介绍

在文档共享领域，便携式文档格式(PDF)Adobe 首创的".NET "和".Python "技术在保持文字丰富、视觉效果吸引人的内容的完整性方面发挥着至关重要的作用。在线访问 PDF 文件通常需要专门的程序。在当今的数字化时代，PDF 文件已成为各种重要出版物不可或缺的文件。许多企业依靠 PDF 文件创建专业文档和发票。此外，开发人员经常利用 PDF 创建库来满足客户的特定要求。随着现代库的出现，生成 PDF 的过程已经简化。在为涉及 PDF 生成的项目选择最合适的库时，必须考虑构建、读取和转换能力等因素，确保无缝集成和最佳性能。

JavaScript 库

例如，我们希望客户能够轻松下载并打印我们的 PDF 发票。此外，我们还必须保持发票的精确排版，确保完美无瑕的印刷质量。

在本节中，我们将深入探讨一系列在转换和创建 HTML 到 PDF 文档方面表现出色的 JavaScript 库，它们为我们提供了高效、准确地生成和转换文档的多功能工具。

1.PDFKit

PDFKit 是一个 PDF 库，是最先进入庞大的 JavaScript 库生态系统的库之一。自 2012 年首次发布以来，它已大受欢迎，截至 2021 年，它仍在定期升级。

PDFKit 使用 Webpack，支持 Node 库和网络浏览器，支持自定义字体和图像嵌入。

不过，正如我们将在比较中看到的，一些 PDF 库实际上只是 PDFKit 包装器，也许比 PDFKit 更容易使用一些。

PDFKit 没有高级 API。文档翻译通常也很困难。正如您所预料的那样，这需要一些时间来适应，而且您可能会发现使用 JavaScript 制作 PDF 并不总是最轻松的工作。

// including the file system module
const fs  = require('fs');

// create a document the same way as above
const Page = new PDFDocument;

// add your content to the document here, as usual
Page.text('Hello world!');

// get a blob when you're done
Page.pipe(fs.createWriteStream('Demo.pdf'));
Page.end();

// including the file system module
const fs  = require('fs');

// create a document the same way as above
const Page = new PDFDocument;

// add your content to the document here, as usual
Page.text('Hello world!');

// get a blob when you're done
Page.pipe(fs.createWriteStream('Demo.pdf'));
Page.end();

JAVASCRIPT

pdfmake

PDFKit 使用传统的命令式方法生成内容，而 pdfmake 则使用声明式方法。因此，使用 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 CreatePdf() {
                var doc = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                pdfMake.createPdf(doc).print();
            }
        </script>
        <button onclick="CreatePdf()">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 CreatePdf() {
                var doc = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                pdfMake.createPdf(doc).print();
            }
        </script>
        <button onclick="CreatePdf()">Print pdf</button>
    </body>
</html>

HTML

如何用 JavaScript 创建 PDF 文件：图 1

3.IronPDF

IronPDF创建该工具的目的是让开发人员更轻松地创建、浏览和编辑 PDF 文档。它的功能是强大的 PDF 转换器，并提供用于创建、编辑和处理 PDF 文件的基础 API。

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 提供了广泛的功能以满足开发人员的需求。
下面的代码演示了如何使用JavaScript 渲染 HTML翻译成像素完美的 PDF 文件：

import {PdfDocument} from "@ironsoftware/ironpdf";

(async () => {
   // Define the JavaScript code to change text color to red
   const htmlWithJavaScript = `<h1>This is HTML</h1>
   <script>
       document.write('<h1>This is JavaScript</h1>');
       window.ironpdf.notifyRender();
   </script>`;

   // Create rendering options object
   const renderOptions = {
       enableJavaScript: true,
   };

   // Render HTML content to a PDF
   const pdf = await PdfDocument.fromHtml(htmlWithJavaScript, { renderOptions });

   // Save the PDF with the executed JavaScript
   await pdf.saveAs("javascript-in-html.pdf");
})();

import {PdfDocument} from "@ironsoftware/ironpdf";

(async () => {
   // Define the JavaScript code to change text color to red
   const htmlWithJavaScript = `<h1>This is HTML</h1>
   <script>
       document.write('<h1>This is JavaScript</h1>');
       window.ironpdf.notifyRender();
   </script>`;

   // Create rendering options object
   const renderOptions = {
       enableJavaScript: true,
   };

   // Render HTML content to a PDF
   const pdf = await PdfDocument.fromHtml(htmlWithJavaScript, { renderOptions });

   // Save the PDF with the executed JavaScript
   await pdf.saveAs("javascript-in-html.pdf");
})();

JAVASCRIPT

您还可以执行自定义 JavaScript翻译时，必须使用可轻松修改 HTML 内容外观的".NET "和 "Python"：

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>Happy New Year!</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("executed_js.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>Happy New Year!</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("executed_js.pdf");
})();

JAVASCRIPT

如何用 JavaScript 创建 PDF 文件：图 2

点击下载按钮后，我们将下载 PDF 文件，如上图 PDF 页面所示。创建的 PDF 文件将如下所示。

如何用 JavaScript 创建 PDF 文件：图 3

更详细的教程可参见IronPdf 的 C# 创建 PDF 教程.

结论

需要指出的是，上图所示的 JavaScript 代码在被他人使用时，有可能会被滥用并产生安全问题。在网页或网站上放置此类代码时，必须考虑未经授权的访问和数据安全漏洞等危险。此外，还必须考虑到需要支持过时的浏览器，这些浏览器可能不具备所有必要的功能以及与各种系统和浏览器的兼容性问题。

IronPDF 不仅适用于 Node.js，还适用于其他流行平台，包括.NET, Java和Python. 这种跨平台的可用性确保了在不同技术栈中工作的开发人员的一致性和灵活性。 IronPDF 具有丰富的功能集、无缝集成和强大的性能，对于希望在 Node.js 项目中简化 PDF 生成过程的开发人员来说，它是一款非常有价值的工具。

为了满足不同开发人员的需求，该库提供了多种许可选项，包括免费试用许可证和其他开发人员许可证可购买的工具。 $749 Lite 软件包附带永久许可证、30 天退款保证、一年软件支持和升级选项。除首次购买外，没有其他费用。

< 前一页
如何在 React 中创建 PDF 文件

下一步 >
如何在JavaScript中查看PDF文件