import {PdfDocument} from "@ironsoftware/ironpdf"; (async () => { // Create a PDF from an HTML string const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>"); // Export the PDF to a file await pdf.saveAs("output.pdf"); // Advanced Example with HTML Assets // Load external HTML assets: Images, CSS, and JavaScript. const htmlContentWithAssets = "<img src='icons/iron.png'>"; const advancedPdf = await PdfDocument.fromHtml(htmlContentWithAssets); // Save the PDF with loaded assets await advancedPdf.saveAs("html-with-assets.pdf"); })();

PDF 工具

如何用JavaScript创建PDF文件

发布 2023年六月13日

简介

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

JavaScript 库

例如，我们希望客户能够轻松下载并打印我们的 PDF 发票。此外，保持发票的精确布局并确保完美的打印质量对我们来说也至关重要。

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

1.PDFKit

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

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

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

PDFKit 没有高级 API。文档也经常难以编写。正如你所期望的那样，PDFKit 需要一些时间来适应，而且你可能会发现使用 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

2.

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 通过 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>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

更详细的教程可参见这里.

结论

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

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

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

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

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