HTML 轉 PDF NodeJS
IronPDF最強大且最受歡迎的功能是能夠從原始HTML、CSS和JavaScript創建高保真度的PDF。 本教程是一份全面的入門指南，旨在幫助Node開發者利用IronPDF將HTML到PDF生成整合到他們自己的項目中。
IronPDF 是一個高階 API 函式庫，可幫助開發人員快速且容易地在軟件應用程式中實現強大且穩固的 PDF 處理功能。 IronPDF 可用於 多種程式語言. 如何建立PDF的詳細說明.NET, Java，和Python，請查閱官方文件頁面. 本教程涵蓋了它在 Node.js 項目中的應用。
請提供您要翻譯的內容。
How to Convert HTML to PDF in Node.js
- Install the HTML to PDF Node library via NPM:
npm install @ironsoftware/ironpdf. - Import the PdfDocument class from the
@ironsoftware/ironpdfpackage. - Convert from HTML string, file, or web URL.
- (optional) Add headers & footers, change page size, orientation and color.
- Call
PdfDocument.saveAsto save the generated PDF
請提供您要翻譯的內容。
入門
立即在您的專案中使用IronPDF，並享受免費試用。
安裝 IronPDF Library for Node.js
在您選定的 Node 項目中，執行以下的 NPM 命令來安裝 IronPDF Node.js 套件：
npm install @ironsoftware/ironpdf您也可以下載和安裝 IronPDF 套件手動.
手動安裝 IronPDF 引擎（可選）
IronPDF for Node.js 目前需要一個IronPDF 引擎二进制文件正常運作。
安裝 IronPDF Engine 二進位檔案，安裝適當的套件適用於您的操作系統：
[{我(安裝 IronPDF Engine 是可選的，因為在首次執行時，@ironpdf 將會自動從 NPM 下載並安裝適合您的瀏覽器和操作系統的二進制文件。 安裝此二進制檔案在無法、受限或不希望使用互聯網的情況下將是非常重要的。)}]
應用授權金鑰（可選）
IronPDF 預設將會在其生成或修改的所有文件上添加帶有標題的背景浮水印。
在 ironpdf.com/nodejs/licensing/ 獲取授權金鑰，以生成無水印的 PDF 文件。
要在不添加浮水印品牌的情況下使用 IronPDF，您必須在全局的 IronPdfGlobalconfig 物件上設置有效的許可證密鑰到 licenseKey 屬性。 下面提供了實現此功能的源代碼：
import {IronPdfGlobalConfig} from "@ironsoftware/ironpdf";
var config = IronPdfGlobalConfig.getConfig();
config.licenseKey = "{YOUR-LICENSE-KEY-HERE}";購買許可證密鑰從我們的授權頁面，或聯繫我們以獲取試用授權金鑰.
請注意
接下來的教程部分將假設我們擁有一個許可證密鑰，並且我們已將其設置在一個名為_config.js_的獨立JavaScript文件中。 我們在任何需要使用IronPDF功能的地方導入此腳本：
import {PdfDocument} from "@ironsoftware/ironpdf";
import('./config.js');
// ...將HTML轉換為PDF
IronPDF庫的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");如上所示，我們使用包含一級標題元素的標記代碼的文字字串來調用 PdfDocument.fromHtml 方法。
PdfDocument.fromHtml 返回一個 Promise，該 Promise 解析為一個實例PdfDocument類別。 PdfDocument 代表了從某些來源內容由庫生成的 PDF 文件。 此類別是IronPDF大部分核心功能的基石，推動了大量PDF創建和編輯的使用案例。
最後，我們在PdfDocument上使用saveAs方法將文件保存到磁盤。 以下顯示的是已保存的PDF文件。
**從 HTML 字串 "<h1>Hello from IronPDF!</h1>". PdfDocument.fromHtml 生成的 PDF 文件看起來就像網頁內容一樣。
從 HTML 檔案建立 PDF 檔案
PdfDocument.fromHtml 不僅僅適用於 HTML 字串。 此方法也接受指向本地HTML文件的路徑。
在我們的下一個範例中，我們將使用這个範例網頁.
我們的範例 HTML 頁面在 Google Chrome 中的顯示情況。 下載此頁面與檔案範例網站上的類似頁面：https://filesamples.com/samples/code/html/sample2.html
以下代码行将整个示例文档转换为PDF。 在 HTML 字串的位置，我們使用有效的檔案路徑調用 PdfDocument.fromHtml，指向我們的範例文件：
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");我們已在下方包括了生成的PDF內容。 請注意，IronPDF 不僅保留了原始 HTML 文檔的外觀，還保留了鏈接、表單和其他常見互動元素的功能。
此 PDF 是由先前的程式碼範例生成的。 比較它的外觀與前一張圖片，並注意到顯著的相似性。!
如果您已經檢查了範例頁面的源代碼，您會注意到它更複雜。 它使用更多類型的HTML元素。(段落、無序列表、換行、水平線、超鏈接、圖像等。)並且還包括一些腳本(用於設置 cookies).
IronPDF 能夠渲染比我們迄今使用的更為複雜的網頁內容。 要演示這一點，讓我們考慮以下頁面：
關於 Puppeteer 的文章，這是一個因能夠使用無頭瀏覽器實例程式化控制 Chrome 而廣受歡迎的 Node Library
上面所描述的頁面是關於Puppeteer Node Library的文章。 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");
});以下圖片顯示了上述程式碼片段的結果。
**如果在Google Chrome中看起來不錯，那麼轉換成PDF後也會看起來不錯。 這包括了CSS和JavaScript密集的頁面設計。
從網址建立一個 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");在上面，我們使用 PdfDocument.fromUrl 在幾行代碼內將網頁轉換為PDF。 IronPDF 將為您抓取網址的 HTML 代碼並無縫呈現。 不需要 HTML 檔案或文字字串。!
從調用 Wikipedia 文章的 PdfDocument.fromUrl 生成的 PDF。 請注意其與原始網頁的相似之處。
從Zip存檔建立PDF檔案
使用 PdfDocument.fromZip 轉換位於壓縮文件中的特定 HTML 文件(壓縮)將檔案轉換為PDF。
例如，假設我們在專案目錄中有一個Zip檔案，其內部結構如下：
html-zip.zip
├─ index.html
├─ style.css
├─ logo.pngindex.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>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 方法時，在第一個參數中指定 zip 的有效路徑，並附上一個設置 mainHtmlFile 屬性的 JSON 對象，其中包含我們想要轉換的 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");
});
**使用 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();本節將快速介紹最常見的 HTML 到 PDF 渲染使用案例，這需要使用 ChromePdfRenderOptions 介面。
每個子節將從預設值開始，並根據需要進行修改以達到目標結果。
自訂 PDF 生成輸出
添加自定義頁首和頁尾
使用 textHeader 和 textFooter 屬性，您可以在新渲染的 PDF 上固定自訂的頁首和/或頁尾內容。
以下示例創建了一個PDF版本的Google搜索首頁，並添加了自定義的頁眉和頁腳。 我們使用分隔線來區分此內容與頁面主體。 我們還在頁眉和頁腳中使用不同的字體，以使區別更加明顯。
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");
});源代碼生成此PDF：
一個新的頁面已以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");
});下面的圖片顯示了這些變更的結果。
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");
});在上述程式碼區塊中，我們配置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");
});下一个代码块配置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");
});從HTML模板生成PDFs
在本教程的最後一部分，我們將運用前幾節介紹的所有知識來完成一項非常實用的自動化任務：使用 HTML 模板生成一個或多個 PDF。
我們將在此部分使用的範本如下所示。 它是從這個公開可訪問的發票模板以包含佔位符標籤(例如。{公司名稱}, {全名}, {發票號碼}等等。)可替換的內容。
**一份範例發票模板。 在生成 PDF 之前，我們將撰寫額外的 JavaScript 代碼，以將動態數據添加到此模版中。
在繼續之前，您可以下載請檢查這個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"));上述源碼定義了三個非同步輔助函數：
getTemplateHtml：使用PdfDocument.fromHtml方法將 HTML 模板加載到一個新的PdfDocument對象中。addTemplateData：使用PdfDocument.replaceText方法替換提供的佔位符(稱為鑰匙)，並用其替換數據值。-
generatePdf：將PdfDocument保存到指定的文件位置。此外，我們宣告一個
const template變量來存儲我們的 HTML 模板文件的位置。從上面的源代碼生成的 PDF 如下所示。
**新的 PDF 文檔是由將 HTML 模板中定義的佔位符替換為真實數據創建的。 此文件保留了CSS樣式和布局，就如同從未發生過任何替換一樣。
進一步閱讀
本教程僅初步介紹了使用IronPDF高級API功能的可能性。 請考慮學習這些相關主題以增進您的知識與理解。
-
PdfGenerator類別這是一個專門的實用類別，用於從HTML、URLs、Zip檔案和其他來源媒體創建PdfDocument對象。 這個類別提供了一個可行的選擇，用以替代在PdfDocument類別上定義的PDF渲染功能。2.
HttpLoginCredentials如果您需要從需要特定 Cookie 或受密碼保護的網頁生成 PDF，這個參考將非常有用。
