HTML 轉 PDF 的 NodeJS

Translated

View the article in English

從原始的 HTML、CSS 和 JavaScript 創建高保真 PDF 的能力是 IronPDF 最強大且最受歡迎的功能。本教程是幫助 Node 開發人員利用 IronPDF 將 HTML 轉 PDF 生成集成到他們自己項目中的全面入門指南。

IronPDF 是一個高級 API 函式庫，幫助開發人員快速且輕鬆地在軟體應用程式中實現強大且穩健的 PDF 處理功能。IronPDF 可以在 多種程式語言詳情請參閱如何在 .NET, Java，和 Python，請查閱官方文件頁面本教程涵蓋了其在Node.js專案中的應用。

如何在 Node.js 中將 HTML 轉換為 PDF

通過 NPM 安裝 HTML to PDF Node 庫： npm install @ironsoftware/ironpdf.
匯入 PdfDocument 從類別 @ironsoftware/ironpdf 包裹。
從 HTML 字串、文件或網頁 URL 轉換。
（可選）添加頁眉和頁腳、更改頁面大小、方向和顏色。
呼叫 PdfDocument.saveAs 儲存生成的PDF

請提供您要翻譯的內容。

入門指南

安裝 IronPDF Library for Node.js

列在您選定的 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

購買許可證密鑰從我們的授權頁面，或聯繫我們以獲取試用授權金鑰.

請注意

License Key 及其他Global configuration settings應該在使用其他函式庫功能之前設定，以確保最佳效能和正確功能。

本教程的後續部分將假定我們已經擁有了一個許可鍵，並且我們已經在一個名為_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 Library 的 Node 版本提供了三種從 HTML 內容創建 PDF 文件的方法：

從 HTML 代碼字符串
從本地 HTML 文件
從線上網站

本節將詳細解釋這三種方法。

從 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，它會解決為一個 PdfDocument 類別。 PdfDocument 代表圖書館從某些來源內容生成的 PDF 文件。此類是 IronPDF 大多數核心功能的基石，用於推動 PDF 創建和編輯的重要用例。

最後，我們使用 saveAs 方法將 PdfDocument 保存到磁碟。保存的 PDF 文件如下所示。

從 HTML 字串 "<h1>Hello from IronPDF 生成的 PDF!。PdfDocument.fromHtml`生成的 PDF 檔案看起來就像網頁內容一樣。

從 HTML 檔案創建 PDF 檔案

PdfDocument.fromHtml 不僅可以處理 HTML 字符串。該方法還接受本地 HTML 文件的路徑。

在我們的下一個範例中，我們將使用這個範例網頁.

我們的範例 HTML 頁面在 Google Chrome 中的顯示效果。從 File Samples 網站下載此頁面和類似的頁面：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 文件的外觀，還保留了鏈接、表單和其他常見互動元素的功能。

此 PDF 是從先前的代碼範例生成的。請將其外觀與先前的圖像進行比較，並注意其顯著的相似性。!如果您已檢查過範例頁面的原始碼，您會注意到它更複雜。它使用了更多類型的 HTML 元素。 (段落、無序列表、換行、水平線、超鏈接、圖像等。) 並且還包括一些腳本 (用於設置 cookies)IronPDF 能夠渲染比我們目前使用的更複雜的網頁內容。為了展示這一點，我們來看看以下這個頁面：

圖 5

一篇關於Puppeteer的文章，這是一個因其能夠使用無頭瀏覽器實例以程式化控制Chrome而廣受歡迎的Node庫

上述頁面是關於Puppeteer Node庫的文章。Puppeteer運行無頭瀏覽器會話，使Node開發人員能夠在伺服器端或客戶端自動化眾多瀏覽器任務。 (其中之一包括伺服器端的HTML PDF生成)新的頁面來源包含眾多資產 (CSS 文件、圖片、腳本文件等。) 並使用更複雜的佈局。對於下一個例子，將轉換此頁面的已保存副本 (連同其來源資產) ```markdown 轉換成像素級完美的 PDF。

以下程式碼片段假設該頁面以 "sample4.html" 名稱保存在與我們項目相同的目錄中：


```node
// 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");
});

以下圖片顯示了上述代碼片段的結果。

如果在 Google Chrome 看起來很好，那麼在轉換為 PDF 後也會保持良好顯示。這包括 CSS 和 JavaScript 密集的頁面設計。

從 URL 創建 PDF 文件

IronPDF 能夠轉換任意大小和複雜度的 HTML 字符串和 HTML 文件。但是，您並不僅限於僅使用來自字符串和文件的原始標記。IronPDF 還可以從 URL 請求 HTML。

請考慮位於 Wikipedia 的文章 https://en.wikipedia.org/wiki/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 文件或文字字串。!

從 Wiki pedia 文章調用 PdfDocument.fromUrl 所生成的 PDF。注意它與原始網頁的相似之處。

從 Zip 壓縮檔案建立 PDF 檔案

使用 PdfDocument.fromZip 將位於壓縮檔案中的特定 HTML 文件轉換為 PDF 文件 (壓縮) 將檔案轉換成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 描述了我們的產品標誌：

假設的HTML壓縮檔裡的範例圖片。

當調用 fromZip 方法時，請在第一個參數中指定壓縮檔的有效路徑，並附上一個設定了 mainHtmlFile 屬性的JSON物件，此屬性應為我們要轉換的HTML檔案名稱。

我們以同樣的方式轉換壓縮檔內的 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

本節將迅速瀏覽最受歡迎的 HTML 到 PDF 渲染使用案例，這些案例需要使用 ChromePdfRenderOptions 介面。

每個子部分將從預設值開始，並根據需要對其進行修改以達到目標結果。

自訂 PDF 生成輸出

添加自訂頁首和頁尾

使用 textHeader 和 textFooter 屬性，您可以在新渲染的 PDF 中添加自訂頁首和/或頁尾內容。

下面的範例創建了一個帶有自訂頁首和頁尾的 Google 搜索首頁的 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格式創建，從Google首頁生成。注意額外的頁眉和頁腳。

為了更大程度地控制頁眉和頁腳的佈局、位置和內容，您也可以使用原始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 能夠在將 HTML 頁面轉換為 PDF 時應用自訂項目。

設定頁邊距、頁面尺寸、頁面方向和顏色

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等待一个流行元素加载完成 SEO 文字編輯器可以成功選擇。

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 模板並在您偏好的 IDE 中查看它。

在下一段源代码中，我們將把 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 類別這是一個專用的工具類，用於從 HTML、URL、Zip 壓縮檔和其他來源媒體創建 PdfDocument 對象。這個類提供了一個使用 PdfDocument 類中定義的 PDF 渲染功能的可行替代方案。 HttpLoginCredentials如果您需要從需要特定 Cookie 或受密碼保護的網頁生成 PDF，這個參考將非常有用。

HTML 轉 PDF 的 NodeJS

如何在 Node.js 中將 HTML 轉換為 PDF

入門指南

安裝 IronPDF Library for Node.js

手動安裝 IronPDF 引擎 (可選的)

請注意

套用授權金鑰 (可選的)

請注意

將 HTML 轉換為 PDF

從 HTML 字串建立 PDF 檔案

從 HTML 檔案創建 PDF 檔案

從 URL 創建 PDF 文件

從 Zip 壓縮檔案建立 PDF 檔案

進階 HTML 轉 PDF 生成選項 `ChromePdfRenderOptions` 介面允許Node開發人員修改庫的HTML渲染行為。那裡公開的屬性在PDF渲染之前，能夠細微地定制PDF的外觀。此外，還可以處理特定HTML-PDF轉換的邊界情況。

自訂 PDF 生成輸出

添加自訂頁首和頁尾

設定頁邊距、頁面尺寸、頁面方向和顏色

從動態網頁生成PDF文件

從 HTML 模板生成 PDF

進一步閱讀

在實際環境中測試

全功能產品

24/5技術支援

獲取你的免費 30天試用序號立即。

試用表格已提交
成功地.

受到全球數百萬工程師的信任

在實際環境中測試

全功能產品

24/5技術支援

獲取你的免費 30天試用序號立即。

試用表格已提交
成功地.

受到全球數百萬工程師的信任

IronPDF 是 IRON 的一部分套件

HTML 轉 PDF 的 NodeJS

如何在 Node.js 中將 HTML 轉換為 PDF

入門指南

安裝與 npm

安裝 IronPDF Library for Node.js

手動安裝 IronPDF 引擎 (可選的)

請注意

套用授權金鑰 (可選的)

請注意

將 HTML 轉換為 PDF

從 HTML 字串建立 PDF 檔案

從 HTML 檔案創建 PDF 檔案

從 URL 創建 PDF 文件

從 Zip 壓縮檔案建立 PDF 檔案

進階 HTML 轉 PDF 生成選項 ChromePdfRenderOptions 介面允許Node開發人員修改庫的HTML渲染行為。那裡公開的屬性在PDF渲染之前，能夠細微地定制PDF的外觀。此外，還可以處理特定HTML-PDF轉換的邊界情況。

自訂 PDF 生成輸出

添加自訂頁首和頁尾

設定頁邊距、頁面尺寸、頁面方向和顏色

從動態網頁生成PDF文件

從 HTML 模板生成 PDF

進一步閱讀

免費獲取

試用表格已提交成功地.

試用表格已提交成功地.

試用表格已提交成功地.

試用表格已提交成功地.

在實際環境中測試

全功能產品

24/5技術支援

獲取你的免費 30天試用序號 立即。

試用表格已提交成功地.

受到全球數百萬工程師的信任

在實際環境中測試

全功能產品

24/5技術支援

獲取你的免費 30天試用序號 立即。

試用表格已提交成功地.

受到全球數百萬工程師的信任

IronPDF 是 IRON 的一部分套件

進階 HTML 轉 PDF 生成選項 `ChromePdfRenderOptions` 介面允許Node開發人員修改庫的HTML渲染行為。那裡公開的屬性在PDF渲染之前，能夠細微地定制PDF的外觀。此外，還可以處理特定HTML-PDF轉換的邊界情況。

試用表格已提交
成功地.

試用表格已提交
成功地.

試用表格已提交
成功地.

試用表格已提交
成功地.

獲取你的免費 30天試用序號立即。

試用表格已提交
成功地.

獲取你的免費 30天試用序號立即。

試用表格已提交
成功地.