HTML 转 PDF NodeJS

Translated

View the article in English

从原始 HTML、CSS 和 JavaScript 创建高保真 PDF 的能力是 IronPDF 最强大且最受欢迎的功能。本教程是一个全面的入门指南，帮助 Node 开发人员利用 IronPDF 将 HTML 转 PDF 的生成功能集成到他们的项目中。

IronPDF 是一个高级 API 库，可以帮助开发人员快速轻松地在软件应用程序中实现强大且稳定的 PDF 处理能力。IronPDF 提供了 多种编程语言. 有关如何创建PDF的详细介绍，请查看 .NET, Java和 Python，请参阅官方文档页面. 本教程涵盖了它在Node.js项目中的使用。

如何在 Node.js 中将 HTML 转换为 PDF

通过 NPM 安装 HTML 转 PDF Node 库： npm install @ironsoftware/ironpdf.
导入 PdfDocument 类中的 @ironsoftware/ironpdf 包装
从 HTML 字符串、文件或网络 URL 进行转换。
(可选）添加页眉和页脚，更改页面大小、方向和颜色。
致电 PdfDocument.saveAs 保存生成的 PDF

入门

为 Node.js 安装 IronPDF 库

在您选择的 Node 项目中运行以下 NPM 命令，安装 IronPDF Node.js 软件包：

npm install @ironsoftware/ironpdf

您还可以下载并安装 IronPDF 软件包人工.

手动安装 IronPDF 引擎 (可选的)

IronPDF for Node.js 目前需要一个二进制 IronPDF 引擎才能正常工作。

通过以下方式安装 IronPDF 引擎二进制文件安装相应的软件包操作系统：

请注意

安装 IronPDF 引擎是可选的，因为 @ironpdf会在首次执行时自动从 NPM 为您的浏览器和操作系统下载并安装适当的二进制文件。不过，在访问互联网受到限制、减少或不希望访问互联网的情况下，明确安装该二进制文件至关重要。

申请许可证密钥 (可选的)

默认情况下，IronPDF 会在生成或修改的所有文档上打上有标题的背景水印。

图 1

**在 ironpdf.com/nodejs/licensing/ 获取许可证密钥，生成无水印的 PDF 文档。

要在不添加水印的情况下使用 IronPDF，您必须在全局 IronPdfGlobalconfig 对象的 licenseKey 属性中设置一个有效的许可证密钥。实现这一点的源代码如下：

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

var config = IronPdfGlobalConfig.getConfig();
config.licenseKey = "{YOUR-LICENSE-KEY-HERE}";

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

var config = IronPdfGlobalConfig.getConfig();
config.licenseKey = "{YOUR-LICENSE-KEY-HERE}";

NODE.JS

购买许可证密钥或联系我们获取免费试用版许可证密钥.

[{i：（许可证密钥和其他全局配置设置，应在使用其他库函数之前进行设置，以确保最佳性能和正常功能。)}]

本教程接下来的章节将假定我们拥有许可证密钥，并已将其设置在名为 config.js 的单独 JavaScript 文件中。我们将在任何需要使用 IronPDF 功能的地方导入该脚本：

import {PdfDocument} from "@ironsoftware/ironpdf";
import('./config.js');
// ...

import {PdfDocument} from "@ironsoftware/ironpdf";
import('./config.js');
// ...

NODE.JS

将 HTML 转换为 PDF

IronPDF 库的 Node 版本提供了三种从 HTML 内容创建 PDF 文件的方法：

1.来自 HTML 代码字符串

2.来自本地 HTML 文件

3.来自在线网站

本节将详细介绍这三种方法。

从 HTML 字符串创建 PDF 文件

PdfDocument.fromHtml "是一种可以从原始网页标记字符串生成 PDF 文件的方法。

这种方法是三种方法中最灵活的一种。这是因为 HTML 字符串中的数据几乎可以来自任何地方：文本文件、数据流、HTML 模板、生成的 HTML 数据等。

下面的代码示例演示了如何实际使用 PdfDocument.fromHtml 方法：

import {PdfDocument} from "@ironsoftware/ironpdf";
import('./config.js');

// Create a PDF from the HTML String "Hello world!"
const pdf = await PdfDocument.fromHtml("<h1>Hello from IronPDF!</h1>");

// Save the PDF document to the file system.
await pdf.saveAs("html-string-to-pdf.pdf");

import {PdfDocument} from "@ironsoftware/ironpdf";
import('./config.js');

// Create a PDF from the HTML String "Hello world!"
const pdf = await PdfDocument.fromHtml("<h1>Hello from IronPDF!</h1>");

// Save the PDF document to the file system.
await pdf.saveAs("html-string-to-pdf.pdf");

NODE.JS

如上图所示，我们使用包含一级标题元素标记代码的文本字符串调用PdfDocument.fromHtml方法。

PdfDocument.fromHtml "会返回一个 Promise，该 Promise 会解析为一个 "PdfDocument.fromHtml "的实例。 PDFDocument 类。PdfDocument "表示库从某些源内容生成的 PDF 文件。该类构成了 IronPDF 大部分核心功能的基石，推动了重要的 PDF 创建和编辑用例。

最后，我们使用 PdfDocument 上的 saveAs 方法将文件保存到磁盘。保存后的 PDF 文件如下所示。

图 2

从 HTML 字符串"<h1>Hello from IronPDF "生成的 PDF!</h1>".PdfDocument.fromHtml "生成的 PDF 文件看起来就像网页内容一样。

从 HTML 文件创建 PDF 文件

PdfDocument.fromHtml "不仅适用于 HTML 字符串。该方法还接受本地 HTML 文档的路径。

在下一个示例中，我们将使用该网页样本.

图 3

在 Google Chrome 浏览器中显示的 HTML 页面示例。从文件示例网站下载此页面和类似页面：https://filesamples.com/samples/code/html/sample2.html

下面几行代码将整个示例文档转换为 PDF。我们使用样本文件的有效文件路径调用 PdfDocument.fromHtml 代替 HTML 字符串：

import {PdfDocument} from "@websiteironsoftware/ironpdf";
import('./config.js');

// Render a PDF from an HTML File
const pdf = await PdfDocument.fromHtml("./sample2.html");

// Save the PDF document to the same folder as our project.
await pdf.saveAs("html-file-to-pdf-1.pdf");

import {PdfDocument} from "@websiteironsoftware/ironpdf";
import('./config.js');

// Render a PDF from an HTML File
const pdf = await PdfDocument.fromHtml("./sample2.html");

// Save the PDF document to the same folder as our project.
await pdf.saveAs("html-file-to-pdf-1.pdf");

NODE.JS

下面是生成的 PDF 内容。请注意，IronPDF 不仅保留了原始 HTML 文档的外观，还保留了链接、表单和其他常见交互元素的功能。

图 4

这份 PDF 是根据前面的代码示例生成的。将其外观与前一张图片进行比较，可以发现两者非常相似!

如果你检查过示例页面的源代码，就会发现它更加复杂。它使用了更多类型的 HTML 元素 (段落、无序列表、换行符、水平规则、超链接、图像等。) 还包括一些脚本 (用于设置 cookie).

IronPDF 能够渲染的网页内容比我们目前使用的要复杂得多。为了演示这一点，让我们来看看下面的页面：

图 5

关于 Puppeteer 的文章，Puppeteer 是一个 Node 库，因其能够使用无头浏览器实例以编程方式控制 Chrome 浏览器而广为人知。

上面描述的页面是一篇关于 Puppeteer 节点库的文章。Puppeteer 运行无头浏览器会话，Node 开发人员用它在服务器端或客户端自动执行大量浏览器任务 (其中之一包括服务器端 HTML PDF 生成).

新网页提供了大量资产 (CSS 文件、图像、脚本文件等。) 并使用更复杂的布局。在下一个示例中，将转换此页面的保存副本 (及其源资产) 变成像素完美的 PDF 文件。

下面的代码片段假定页面保存在与我们的项目相同的目录中，即 "sample4.html"：

// Render a from even more complex HTML code.
PdfDocument.fromHtml("./sample4.html").then((pdf) async {
    return await pdf.saveAs("html-file-to-pdf-2.pdf");
});

// Render a from even more complex HTML code.
PdfDocument.fromHtml("./sample4.html").then((pdf) async {
    return await pdf.saveAs("html-file-to-pdf-2.pdf");
});

NODE.JS

下图显示了上述代码段的结果。

图 6

**如果在 Google Chrome 浏览器中看起来不错，那么转换成 PDF 时也会不错。这包括 CSS 和 JavaScript 较多的页面设计。

从 URL 创建 PDF 文件

IronPDF 可以转换任何大小和复杂程度的 HTML 字符串和 HTML 文件。不过，您并不仅限于使用字符串和文件中的原始标记。IronPDF 还能从 URL 请求 HTML。

维基百科文章位于 https://en.wikipedia.org/wiki/PDF.

图 7

**维基百科关于 PDF 格式的文章，PDF 格式在符合标准的网络浏览器中显示。

使用此源代码将维基百科文章转换为 PDF：

import {PdfDocument} from "@ironsoftware/ironpdf";
import('./config.js');

// Convert the Web Page to a pixel-perfect PDF file.
const pdf = await PdfDocument.fromUrl("https://en.wikipedia.org/wiki/PDF");

// Save the document.
await pdf.saveAs("url-to-pdf.pdf");

import {PdfDocument} from "@ironsoftware/ironpdf";
import('./config.js');

// Convert the Web Page to a pixel-perfect PDF file.
const pdf = await PdfDocument.fromUrl("https://en.wikipedia.org/wiki/PDF");

// Save the document.
await pdf.saveAs("url-to-pdf.pdf");

NODE.JS

上面，我们使用 PdfDocument.fromUrl 在几行代码内将网页转换为 PDF。IronPDF 将为您抓取网页地址的 HTML 代码并无缝呈现。无需 HTML 文件或文本字符串!

图 8

在维基百科文章中调用 PdfDocument.fromUrl 生成的 PDF。请注意它与原始网页的相似之处。

从 Zip 档案创建 PDF 文件

使用 PdfDocument.fromZip 转换压缩文件中的特定 HTML 文件。 (压缩) 文件转换成 PDF 文件。

例如，假设我们在项目目录中有一个 Zip 文件，其内部结构如下：

html-zip.zip
├─ index.html
├─ style.css
├─ logo.png

index.html 文件包含代码：

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello world!</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello from IronPDF!</h1>
    <a href="https://ironpdf.com/nodejs/">
      <img src="logo.png" alt="IronPDF for Node.js">
    </a>
  </body>
</html>

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello world!</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello from IronPDF!</h1>
    <a href="https://ironpdf.com/nodejs/">
      <img src="logo.png" alt="IronPDF for Node.js">
    </a>
  </body>
</html>

HTML

style.css 声明了五条 CSS 规则：

@font-face {
font-family: 'Gotham-Black';
src: url('gotham-black-webfont.eot?') format('embedded-opentype'), url('gotham-black-webfont.woff2') format('woff2'), url('gotham-black-webfont.woff') format('woff'), url('gotham-black-webfont.ttf') format('truetype'), url('gotham-black-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
    margin-bottom: auto;
    color: white;
    background-color: black;
    text-align: center;
    font-family: "Helvetica"
}

h1 {
    font-family: "Gotham-Black";
    margin-bottom: 70px;
    font-size: 32pt;
}

img {
    width: 400px;
    height: auto;
}

p {
    text-decoration: underline;
    font-size: smaller;
}

最后，logo.png 描绘了我们的产品徽标：

图 9

**假设 HTML 压缩文件中的图片样本。

调用 fromZip 方法时，请在第一个参数中指定一个有效的 zip 文件路径，同时指定一个 JSON 对象，该对象会将 mainHtmlFile 属性设置为我们要转换的 zip 文件中 HTML 文件的名称。

我们将以同样的方式转换 zip 文件夹中的 index.html 文件：

import {PdfDocument} from "@ironsoftware/ironpdf";
import('./config.js');

// Render the HTML string
PdfDocument.fromZip("./html-zip.zip", {
    mainHtmlFile: "index.html"
}).then(async (pdf) => {
    return await pdf.saveAs("html-zip-to-pdf.pdf");
});

import {PdfDocument} from "@ironsoftware/ironpdf";
import('./config.js');

// Render the HTML string
PdfDocument.fromZip("./html-zip.zip", {
    mainHtmlFile: "index.html"
}).then(async (pdf) => {
    return await pdf.saveAs("html-zip-to-pdf.pdf");
});

NODE.JS

图 10

使用 PdfDocument.fromZip 函数创建 PDF。该函数成功渲染了 ZIP 文件中包含的 HTML 代码及其包含的资产。

高级 HTML 到 PDF 生成选项

高级 ChromePdfRenderOptions 接口允许 Node 开发人员修改库的 HTML 渲染行为。通过该接口公开的属性，可以在 PDF 渲染之前对 PDF 的外观进行细化定制。此外，它们还能处理特定的 HTML-PDF 转换边缘情况。

IronPDF 最初使用一些默认的 ChromePdfRenderOptions 值来渲染新的 PDF。您可以通过调用 defaultChromePdfRenderOptions 函数来轮询这些预设值：

// Retrieve a ChromePdfRenderOptions object with default settings.
var options = defaultChromePdfRenderOptions();

// Retrieve a ChromePdfRenderOptions object with default settings.
var options = defaultChromePdfRenderOptions();

NODE.JS

本节将简要介绍需要使用 "ChromePdfRenderOptions "接口的最常用 HTML 到 PDF 渲染用例。

每个小节都将从预设值开始，并根据需要进行修改，以实现目标结果。

自定义 PDF 生成输出

添加自定义页眉和页脚

使用 textHeader 和 textFooter 属性，您可以在新渲染的 PDF 文件中添加自定义页眉和/或页脚内容。

下面的示例创建了一个 PDF 版本的谷歌搜索主页，其中的自定义页眉和页脚均由文本内容构成。我们使用分隔线将这些内容与页面正文分开。我们还在页眉和页脚中使用了不同的字体，使区分更加清晰。

import {PdfDocument, defaultChromePdfRenderOptions, AffixFonts} from "@ironsoftware/ironpdf";
import('./config.js');

var options = defaultChromePdfRenderOptions();

// Build a Custom Text-Based Header
options.textHeader = {
    centerText: "https://www.adobe.com",
    dividerLine: true,
    font: AffixFonts.CourierNew,
    fontSize: 12,
    leftText: "URL to PDF"
};

// Build a custom Text-Based Footer
options.textFooter = {
    centerText: "IronPDF for Node.js",
    dividerLine: true,
    fontSize: 14,
    font: AffixFonts.Helvetica,
    rightText: "HTML to PDF in Node.js"
};

// Render a PDF from an HTML File
PdfDocument.fromUrl("https://www.google.com/", {renderOptions: options}).then(async (pdf) => {
    return await pdf.saveAs("add-custom-headers-footers-1.pdf");
});

import {PdfDocument, defaultChromePdfRenderOptions, AffixFonts} from "@ironsoftware/ironpdf";
import('./config.js');

var options = defaultChromePdfRenderOptions();

// Build a Custom Text-Based Header
options.textHeader = {
    centerText: "https://www.adobe.com",
    dividerLine: true,
    font: AffixFonts.CourierNew,
    fontSize: 12,
    leftText: "URL to PDF"
};

// Build a custom Text-Based Footer
options.textFooter = {
    centerText: "IronPDF for Node.js",
    dividerLine: true,
    fontSize: 14,
    font: AffixFonts.Helvetica,
    rightText: "HTML to PDF in Node.js"
};

// Render a PDF from an HTML File
PdfDocument.fromUrl("https://www.google.com/", {renderOptions: options}).then(async (pdf) => {
    return await pdf.saveAs("add-custom-headers-footers-1.pdf");
});

NODE.JS

源代码生成了这份 PDF 文件：

图 11

**创建了一个 PDF 格式的新页面，由谷歌主页生成。注意添加了页眉和页脚。

要对页眉和页脚的布局、位置和内容进行更多控制，也可以使用原始 HTML 代替文本来定义它们。

在随后的代码块中，我们将使用 HTML 在页眉和页脚中加入更丰富的内容。在页眉中，我们将页面 URL 加粗并居中对齐；在页脚中，我们将一个徽标嵌入并居中对齐。

import {PdfDocument, defaultChromePdfRenderOptions} from "@ironsoftware/ironpdf";
import('./config.js');

var options = defaultChromePdfRenderOptions();
options.htmlHeader = {
    htmlFragment: "<strong>https://www.google.com/</strong>",
    dividerLine: true,
    dividerLineColor: "blue",
    loadStylesAndCSSFromMainHtmlDocument: true,
};
options.htmlFooter = {
    htmlFragment: "<img src='logo.png' alt='IronPDF for Node.js' style='display: block; width: 150px; height: auto; margin-left: auto; margin-right: auto;'>",
    dividerLine: true,
    loadStylesAndCSSFromMainHtmlDocument: true
};

// Render a PDF from an HTML File
await PdfDocument.fromUrl("https://www.google.com/", {renderOptions: options}).then(async (pdf) => {
    return await pdf.saveAs("add-html-headers-footers.pdf");
});

import {PdfDocument, defaultChromePdfRenderOptions} from "@ironsoftware/ironpdf";
import('./config.js');

var options = defaultChromePdfRenderOptions();
options.htmlHeader = {
    htmlFragment: "<strong>https://www.google.com/</strong>",
    dividerLine: true,
    dividerLineColor: "blue",
    loadStylesAndCSSFromMainHtmlDocument: true,
};
options.htmlFooter = {
    htmlFragment: "<img src='logo.png' alt='IronPDF for Node.js' style='display: block; width: 150px; height: auto; margin-left: auto; margin-right: auto;'>",
    dividerLine: true,
    loadStylesAndCSSFromMainHtmlDocument: true
};

// Render a PDF from an HTML File
await PdfDocument.fromUrl("https://www.google.com/", {renderOptions: options}).then(async (pdf) => {
    return await pdf.saveAs("add-html-headers-footers.pdf");
});

NODE.JS

下图显示了这些更改的结果。

图 12

**IronPDF for Node.js 可在转换为 PDF 时对 HTML 页面进行自定义。

设置页边距、页面大小、页面方向和颜色

IronPDF 支持为新转换的 PDF 文件定义自定义页边距、页面大小和页面方向的其他设置。

import {PdfDocument, defaultChromePdfRenderOptions, PaperSize, FitToPaperModes, PdfPaperOrientation} from "@ironsoftware/ironpdf";
import('./config.js');

var options = defaultChromePdfRenderOptions();

// Set top, left, right, and bottom page margins in millimeters. 
options.margin = {
    top: 50,
    bottom: 50,
    left: 60,
    right: 60
};
options.paperSize = PaperSize.A5;
options.fitToPaperMode = FitToPaperModes.FitToPage;
options.paperOrientation = PdfPaperOrientation.Landscape;
options.grayScale = true;

// Create a PDF from the Google.com Home Page
PdfDocument.fromUrl("https://www.google.com/", {renderOptions: options}).then(async (pdf) => {
    return await pdf.saveAs("set-margins-and-page-size.pdf");
});

import {PdfDocument, defaultChromePdfRenderOptions, PaperSize, FitToPaperModes, PdfPaperOrientation} from "@ironsoftware/ironpdf";
import('./config.js');

var options = defaultChromePdfRenderOptions();

// Set top, left, right, and bottom page margins in millimeters. 
options.margin = {
    top: 50,
    bottom: 50,
    left: 60,
    right: 60
};
options.paperSize = PaperSize.A5;
options.fitToPaperMode = FitToPaperModes.FitToPage;
options.paperOrientation = PdfPaperOrientation.Landscape;
options.grayScale = true;

// Create a PDF from the Google.com Home Page
PdfDocument.fromUrl("https://www.google.com/", {renderOptions: options}).then(async (pdf) => {
    return await pdf.saveAs("set-margins-and-page-size.pdf");
});

NODE.JS

在上面的代码块中，我们对 IronPDF 进行了配置，以生成横向灰度的 Google 主页 PDF，并留出至少 50 毫米的空白。我们还将其设置为适合 A5 纸张大小的内容。

从动态网页生成 PDF

对于包含在页面加载时无法立即使用和呈现的内容的网页，可能有必要暂停呈现该页面的内容，直到满足某些条件为止。

例如，开发人员可能希望生成一份 PDF 文件，其中包含的内容在页面加载 15 秒后才会出现。在另一种情况下，同样的内容可能只有在某些复杂的客户端代码执行后才会出现。

要处理这两种边缘情况 (以及更多)IronPDF的Node版本定义了 "WaitFor "机制。开发人员可在其 "ChromePdfRenderOptions "设置中加入该属性，以指示 IronPDF 的 Chrome 渲染引擎在特定事件发生时转换页面内容。

以下代码块将 IronPDF 设置为等待 20 秒后才将主页内容转换为 PDF：

import {PdfDocument, defaultChromePdfRenderOptions, WaitForType} from "@ironsoftware/ironpdf";
import('./config.js');

// Configure the Chrome Renderer to wait until 20 seconds has passed
// before rendering the web page as a PDF.
var options = defaultChromePdfRenderOptions();
options.waitFor = {
    type: WaitForType.RenderDelay,
    delay: 20000
}
PdfDocument.fromUrl("https://ironpdf.com/nodejs/", {renderOptions: options}).then(async (pdf) => {
    return await pdf.saveAs("waitfor-renderdelay.pdf");
});

import {PdfDocument, defaultChromePdfRenderOptions, WaitForType} from "@ironsoftware/ironpdf";
import('./config.js');

// Configure the Chrome Renderer to wait until 20 seconds has passed
// before rendering the web page as a PDF.
var options = defaultChromePdfRenderOptions();
options.waitFor = {
    type: WaitForType.RenderDelay,
    delay: 20000
}
PdfDocument.fromUrl("https://ironpdf.com/nodejs/", {renderOptions: options}).then(async (pdf) => {
    return await pdf.saveAs("waitfor-renderdelay.pdf");
});

NODE.JS

下一个代码块将对 IronPDF 进行配置，使其等待流行页面上的元素出现。搜索引擎优化文本编辑器可以成功选择。

import {PdfDocument, defaultChromePdfRenderOptions, WaitForType} from "@ironsoftware/ironpdf";
import('./config.js');

// Configure the Chrome Renderer to wait up to 20 seconds for a specific element to appear
options.waitFor = {
    type: WaitForType.HtmlElement,
    htmlQueryStr: "div.ProseMirror",
    maxWaitTime: 20000,
}
PdfDocument.fromUrl("https://app.surferseo.com/drafts/s/V7VkcdfgFz-dpkldsfHDGFFYf4jjSvvjsdf", {renderOptions: options}).then(async (pdf) => {
    return await pdf.saveAs("waitfor-htmlelement.pdf");
});

import {PdfDocument, defaultChromePdfRenderOptions, WaitForType} from "@ironsoftware/ironpdf";
import('./config.js');

// Configure the Chrome Renderer to wait up to 20 seconds for a specific element to appear
options.waitFor = {
    type: WaitForType.HtmlElement,
    htmlQueryStr: "div.ProseMirror",
    maxWaitTime: 20000,
}
PdfDocument.fromUrl("https://app.surferseo.com/drafts/s/V7VkcdfgFz-dpkldsfHDGFFYf4jjSvvjsdf", {renderOptions: options}).then(async (pdf) => {
    return await pdf.saveAs("waitfor-htmlelement.pdf");
});

NODE.JS

从 HTML 模板生成 PDF 文件

在本教程的最后一部分，我们将应用前几节介绍的所有知识来完成一个非常实用的自动化操作：使用 HTML 模板生成一个或多个 PDF。

本节将使用的模板如下所示。该模板改编自可公开访问的统一发票包含占位符标记的模板 (例如 {公司名称}, {全名}, {发票编号}等等。) 可替换内容。

图 13

**发票模板示例。我们将编写额外的 JavaScript 代码，在生成 PDF 文件之前为该模板添加动态数据。

在继续之前，您可以下载此 HTML 模板，并在您喜欢的集成开发环境中进行检查。

在接下来的源代码块中，我们将把 HTML 模板加载到一个新的 PdfDocument 对象中，用一些虚拟测试数据替换我们定义的占位符，然后把 PdfDocument 对象保存到文件系统中。

import {PdfDocument} from "@ironsoftware/ironpdf";
import('./config.js');

/**
 * Loads an HTML template from the file system.
 */
async function getTemplateHtml(fileLocation) {
    // Return promise for loading template file
    return PdfDocument.fromFile(fileLocation);
}

/**
 * Save the PDF document at a given location.
 */
async function generatePdf(pdf, location) {
    return pdf.saveAs(location);
}

/**
 * Use the PdfDocument.replaceText method to replace 
 * a specified placeholder with a provided value.
 */
async function addTemplateData(pdf, key, value) {
    return pdf.replaceText(key, value);
}

const template = "./sample-invoice.html";
getTemplateHtml(template).then(async (doc) => { // load HTML template from file
    await addTemplateData(doc, "{FULL-NAME}", "Lizbeth Presland");
    await addTemplateData(doc, "{ADDRESS}", "678 Manitowish Alley, Portland, OG");
    await addTemplateData(doc, "{PHONE-NUMBER}", "(763) 894-4345");
    await addTemplateData(doc, "{INVOICE-NUMBER}", "787");
    await addTemplateData(doc, "{INVOICE-DATE}", "August 28, 2023");
    await addTemplateData(doc, "{AMOUNT-DUE}", "13,760.13");
    await addTemplateData(doc, "{RECIPIENT}", "Celestyna Farmar"),
    await addTemplateData(doc, "{COMPANY-NAME}", "BrainBook");
    await addTemplateData(doc, "{TOTAL}", "13,760.13");
    await addTemplateData(doc, "{AMOUNT-PAID}", "0.00");
    await addTemplateData(doc, "{BALANCE-DUE}", "13,760.13");
    await addTemplateData(doc, "{ITEM}", "Training Sessions");
    await addTemplateData(doc, "{DESCRIPTION}", "60 Minute instruction");
    await addTemplateData(doc, "{RATE}", "3,440.03");
    await addTemplateData(doc, "{QUANTITY}", "4");
    await addTemplateData(doc, "{PRICE}", "13,760.13");
    return doc;
}).then(async (doc) => await generatePdf(doc, "html-template-to-pdf.pdf"));

import {PdfDocument} from "@ironsoftware/ironpdf";
import('./config.js');

/**
 * Loads an HTML template from the file system.
 */
async function getTemplateHtml(fileLocation) {
    // Return promise for loading template file
    return PdfDocument.fromFile(fileLocation);
}

/**
 * Save the PDF document at a given location.
 */
async function generatePdf(pdf, location) {
    return pdf.saveAs(location);
}

/**
 * Use the PdfDocument.replaceText method to replace 
 * a specified placeholder with a provided value.
 */
async function addTemplateData(pdf, key, value) {
    return pdf.replaceText(key, value);
}

const template = "./sample-invoice.html";
getTemplateHtml(template).then(async (doc) => { // load HTML template from file
    await addTemplateData(doc, "{FULL-NAME}", "Lizbeth Presland");
    await addTemplateData(doc, "{ADDRESS}", "678 Manitowish Alley, Portland, OG");
    await addTemplateData(doc, "{PHONE-NUMBER}", "(763) 894-4345");
    await addTemplateData(doc, "{INVOICE-NUMBER}", "787");
    await addTemplateData(doc, "{INVOICE-DATE}", "August 28, 2023");
    await addTemplateData(doc, "{AMOUNT-DUE}", "13,760.13");
    await addTemplateData(doc, "{RECIPIENT}", "Celestyna Farmar"),
    await addTemplateData(doc, "{COMPANY-NAME}", "BrainBook");
    await addTemplateData(doc, "{TOTAL}", "13,760.13");
    await addTemplateData(doc, "{AMOUNT-PAID}", "0.00");
    await addTemplateData(doc, "{BALANCE-DUE}", "13,760.13");
    await addTemplateData(doc, "{ITEM}", "Training Sessions");
    await addTemplateData(doc, "{DESCRIPTION}", "60 Minute instruction");
    await addTemplateData(doc, "{RATE}", "3,440.03");
    await addTemplateData(doc, "{QUANTITY}", "4");
    await addTemplateData(doc, "{PRICE}", "13,760.13");
    return doc;
}).then(async (doc) => await generatePdf(doc, "html-template-to-pdf.pdf"));

NODE.JS

上述源代码定义了三个异步辅助函数：

getTemplateHtml：使用PdfDocument.fromHtml方法将 HTML 模板加载到新的PdfDocument` 对象中。
addTemplateData：使用PdfDocument.replaceText`方法替换提供的占位符 (称为关键)的替换数据值。
generatePdf: 将一个 PdfDocument 保存到指定的文件位置。

此外，我们还声明了一个 const template 变量来保存 HTML 模板文件的位置。根据上述源代码生成的 PDF 如下所示。

图 14

将 HTML 模板中定义的占位符替换为真实数据后创建的新 PDF 文档。该文档保留了 CSS 样式和布局，这也是我们在没有进行此类替换的情况下所期望的。

进一步阅读

本教程仅涉及 IronPDF 高级 API 功能的皮毛。请考虑学习这些相关主题，以加深您的知识和理解。

PDFGenerator" 类PDFDocument 类：这是一个专用的实用工具类，用于从 HTML、URL、Zip 档案和其他源媒体创建 PdfDocument 对象。该类为使用定义在 PdfDocument 类上的 PDF 渲染函数提供了一个可行的替代方案。
HttpLoginCredentials 登录凭据注意：如果您需要从需要特定 cookie 或受密码保护的网页生成 PDF，那么本参考资料将非常有用。

HTML 转 PDF NodeJS

如何在 Node.js 中将 HTML 转换为 PDF

入门

为 Node.js 安装 IronPDF 库

手动安装 IronPDF 引擎 (可选的)

请注意

申请许可证密钥 (可选的)

将 HTML 转换为 PDF

从 HTML 字符串创建 PDF 文件

从 HTML 文件创建 PDF 文件

从 URL 创建 PDF 文件

从 Zip 档案创建 PDF 文件

高级 HTML 到 PDF 生成选项

自定义 PDF 生成输出

添加自定义页眉和页脚

设置页边距、页面大小、页面方向和颜色

从动态网页生成 PDF

从 HTML 模板生成 PDF 文件

进一步阅读

在实际环境中测试

全面功能产品

24/5 技术支持

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

试用表格已提交
成功地.

受到全球数百万工程师的信任

在实际环境中测试

全面功能产品

24/5 技术支持

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

试用表格已提交
成功地.

受到全球数百万工程师的信任

IronPDF 是 IRON 的一部分套装

HTML 转 PDF NodeJS

如何在 Node.js 中将 HTML 转换为 PDF

入门

安装使用 npm

为 Node.js 安装 IronPDF 库

手动安装 IronPDF 引擎 (可选的)

请注意

申请许可证密钥 (可选的)

将 HTML 转换为 PDF

从 HTML 字符串创建 PDF 文件

从 HTML 文件创建 PDF 文件

从 URL 创建 PDF 文件

从 Zip 档案创建 PDF 文件

高级 HTML 到 PDF 生成选项

自定义 PDF 生成输出

添加自定义页眉和页脚

设置页边距、页面大小、页面方向和颜色

从动态网页生成 PDF

从 HTML 模板生成 PDF 文件

进一步阅读

获取您的免费

试用表格已提交成功地.

试用表格已提交成功地.

试用表格已提交成功地.

试用表格已提交成功地.

在实际环境中测试

全面功能产品

24/5 技术支持

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

试用表格已提交成功地.

受到全球数百万工程师的信任

在实际环境中测试

全面功能产品

24/5 技术支持

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

试用表格已提交成功地.

受到全球数百万工程师的信任

IronPDF 是 IRON 的一部分套装

试用表格已提交
成功地.

试用表格已提交
成功地.

试用表格已提交
成功地.

试用表格已提交
成功地.

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

试用表格已提交
成功地.

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

试用表格已提交
成功地.