La característica más poderosa y popular de IronPDF es la capacidad de crear PDF de alta fidelidad a partir de HTML, CSS y JavaScript en bruto. Este tutorial guía a los desarrolladores de Node.js a través de cada método práctico para convertir contenido HTML en PDFs — desde una conversión de cadena de una sola línea hasta la generación de documentos dinámicos impulsada por plantillas.
IronPDF es una biblioteca de API de alto nivel que ayuda a los desarrolladores a implementar capacidades poderosas de procesamiento de PDF en aplicaciones de software rápidamente. IronPDF está disponible en múltiples lenguajes de programación. Para una cobertura detallada sobre la creación de PDFs en .NET, Java, y Python, consulte las páginas oficiales de documentación. Este tutorial cubre su uso tal como se aplica a los proyectos de Node.js.
Inicio rápido: Convertir HTML a PDF en Node.js
Cómo convertir HTML a PDF en Node.js
- Instale la biblioteca IronPDF for Node.js a través de NPM:
npm install @ironsoftware/ironpdf - Importe la clase PdfDocument del paquete
@ironsoftware/ironpdf. - Llame
PdfDocument.fromHtml,PdfDocument.fromUrl, oPdfDocument.fromZipdependiendo de su fuente de HTML. - Opte por configurar opciones de renderizado: encabezados, pies de página, tamaño de página, orientación y márgenes.
- Llame
PdfDocument.saveAspara guardar el PDF generado en disco.
Tabla de contenido
- ¿Cómo se empieza con IronPDF for Node.js?
- ¿Cómo se convierte HTML a PDF en Node.js?
- ¿Qué opciones avanzadas de renderizado soporta IronPDF?
- ¿Cómo se generan PDFs a partir de una plantilla HTML?
- ¿Cuáles son los próximos pasos?
¿Cómo se comienza con IronPDF for Node.js? {#getting-started}
Comience a usar IronPDF en su proyecto hoy con una prueba gratuita.
Instalar la biblioteca IronPDF
Instale el paquete IronPDF for Node.js ejecutando el siguiente comando NPM en su proyecto Node.js elegido:
//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/install.sh
npm install @ironsoftware/ironpdf//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/install.sh
npm install @ironsoftware/ironpdfTambién puede descargar e instalar el paquete IronPDF manualmente.
¿Cómo se instala el IronPDF Engine?
IronPDF for Node.js requiere un binario del IronPDF Engine para funcionar.
@ironsoftware/ironpdf se descarga e instala automáticamente el binario apropiado para tu sistema operativo en la primera ejecución. Se recomienda la instalación explícita en entornos donde el acceso a internet está restringido o no disponible.Instale el binario del IronPDF Engine instalando el paquete apropiado para su sistema operativo.
¿Cómo se aplica una clave de licencia?
Por defecto, IronPDF marca todos los documentos que genera o modifica con una marca de agua. Para eliminar la marca de agua, establece la propiedad licenseKey en el objeto global IronPdfGlobalConfig con una clave de licencia válida:
//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/config.js
import { IronPdfGlobalConfig } from "@ironsoftware/ironpdf";
// Retrieve the global configuration object
var config = IronPdfGlobalConfig.getConfig();
// Set a valid license key to remove watermarks
config.licenseKey = "{YOUR-LICENSE-KEY-HERE}";//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/config.js
import { IronPdfGlobalConfig } from "@ironsoftware/ironpdf";
// Retrieve the global configuration object
var config = IronPdfGlobalConfig.getConfig();
// Set a valid license key to remove watermarks
config.licenseKey = "{YOUR-LICENSE-KEY-HERE}";Obtén una clave de licencia de prueba gratuita o compra una clave de licencia desde la página de licencias.
Los ejemplos de código restantes en este tutorial suponen que se ha aplicado una clave de licencia en un archivo config.js separado, que se importa al principio de cada script:
//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/config-import.js
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// ...//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/config-import.js
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// ...
Obtén una clave de licencia en ironpdf.com/nodejs/licensing/ para generar documentos PDF sin marcas de agua.
¿Cómo se convierte HTML a PDF en Node.js? {#convert-html-to-pdf}
La biblioteca IronPDF for Node.js ofrece cuatro enfoques para crear archivos PDF a partir de contenido HTML:
- Desde un código HTML
- Desde un archivo HTML local
- Desde una URL en línea
- Desde un archivo ZIP comprimido
Cada enfoque utiliza la clase PdfDocument como su fundamento. Un PdfDocument representa un archivo PDF producido a partir de algún contenido fuente y es la base de la mayoría de las funcionalidades principales de creación y edición de IronPDF.
¿Cómo se crea un PDF a partir de una cadena HTML? {#create-pdf-from-html-string}
PdfDocument.fromHtml genera PDFs a partir de cadenas de marcado HTML en bruto. Este enfoque ofrece la mayor flexibilidad de los cuatro métodos porque la cadena HTML puede obtenerse prácticamente de cualquier fuente: archivos de texto, flujos de datos, un motor de plantillas HTML o marcado construido dinámicamente.
//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/html-string-to-pdf.js
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// Create a PDF from an HTML string
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");//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/html-string-to-pdf.js
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// Create a PDF from an HTML string
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 devuelve una Promesa que se resuelve en una instancia de la clase PdfDocument. Después de obtener la instancia, llama a saveAs con una ruta de archivo de destino para escribir el PDF en el disco. El archivo PDF guardado representa el HTML exactamente como lo mostraría un navegador compatible con los estándares.
The PDF generated from the HTML string <h1>Hello from IronPDF!</h1>. Los archivos PDF que PdfDocument.fromHtml genera aparecen tal como lo haría el contenido de una página web.
¿Cómo se crea un PDF a partir de un archivo HTML? {#create-pdf-from-html-file}
PdfDocument.fromHtml también acepta una ruta a un documento HTML local. En lugar de una cadena de marcado, pase una ruta de archivo válida como primer argumento. Este es el enfoque preferido cuando se trabaja con páginas web guardadas que referencia activos locales de CSS, JavaScript e imágenes.
El siguiente ejemplo convierte una página web de muestra en un PDF:
//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/html-file-to-pdf.js
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// Render a PDF from a local HTML file
const pdf = await PdfDocument.fromHtml("./sample2.html");
// Save the PDF document to the project directory
await pdf.saveAs("html-file-to-pdf-1.pdf");//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/html-file-to-pdf.js
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// Render a PDF from a local HTML file
const pdf = await PdfDocument.fromHtml("./sample2.html");
// Save the PDF document to the project directory
await pdf.saveAs("html-file-to-pdf-1.pdf");
La página HTML de muestra tal como aparece en Google Chrome. Descargue esta y páginas similares desde el sitio web de File Samples: https://filesamples.com/samples/code/html/sample2.html
IronPDF preserva la apariencia del documento HTML original y retiene la funcionalidad de enlaces, formularios y otros elementos interactivos. Esta fidelidad se extiende a páginas complejas que incluyen párrafos, listas, imágenes, hipervínculos y scripts del lado del cliente.
Este PDF fue generado a partir del ejemplo de archivo HTML anterior. Compare su apariencia con la imagen anterior — IronPDF conserva el diseño con alta fidelidad.
IronPDF maneja páginas que van más allá del marcado simple. El siguiente ejemplo convierte una página rica en funciones que proviene de numerosos archivos CSS externos, imágenes y activos de scripts:
//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/html-complex-file-to-pdf.js
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// Render a PDF from a complex HTML page with external assets
PdfDocument.fromHtml("./sample4.html").then(async (pdf) => {
return await pdf.saveAs("html-file-to-pdf-2.pdf");
});//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/html-complex-file-to-pdf.js
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// Render a PDF from a complex HTML page with external assets
PdfDocument.fromHtml("./sample4.html").then(async (pdf) => {
return await pdf.saveAs("html-file-to-pdf-2.pdf");
});
Si se ve bien en Google Chrome, se verá bien cuando se convierte a PDF. Esto incluye diseños de página pesados en CSS y renderizados con JavaScript.
¿Cómo se crea un PDF a partir de una URL? {#create-pdf-from-url}
PdfDocument.fromUrl obtiene y renderiza una página web en vivo como un PDF. Pase cualquier URL públicamente accesible como argumento. El motor de renderizado Chrome de IronPDF recupera la página, carga todos los recursos y produce un PDF perfecto — no se requiere descarga manual de HTML.
//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/url-to-pdf.js
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// Convert a live web page to a PDF
const pdf = await PdfDocument.fromUrl("https://en.wikipedia.org/wiki/PDF");
// Save the document
await pdf.saveAs("url-to-pdf.pdf");//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/url-to-pdf.js
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// Convert a live web page to a PDF
const pdf = await PdfDocument.fromUrl("https://en.wikipedia.org/wiki/PDF");
// Save the document
await pdf.saveAs("url-to-pdf.pdf");
El artículo de Wikipedia sobre el formato PDF, tal como aparece en un navegador web compatible con estándares.
El PDF generado al llamar a PdfDocument.fromUrl en un artículo de Wikipedia. Observe su estrecha similitud con la página web original.
ChromePdfRenderOptions.¿Cómo se crea un PDF a partir de un archivo Zip? {#create-pdf-from-zip}
PdfDocument.fromZip convierte un archivo HTML específico contenido en un archivo ZIP en un PDF. Esto es particularmente útil al distribuir proyectos HTML autónomos que agrupan sus recursos HTML, CSS e imagen juntos.
Para este ejemplo, suponga que el directorio del proyecto contiene un archivo ZIP con la siguiente estructura:
//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/zip-structure.txt
html-zip.zip
├─ index.html
├─ style.css
├─ logo.pngEl archivo index.html contiene:
//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/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>//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/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>Y style.css declara el diseño de la página y las reglas de fuente:
//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/style.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;
}
La imagen de ejemplo dentro del archivo ZIP HTML hipotético.
Al llamar a fromZip, especifica la ruta al archivo ZIP como el primer argumento y un objeto de configuración como el segundo. Establece la propiedad mainHtmlFile al nombre del archivo HTML dentro del archivo que debe ser convertido:
//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/zip-to-pdf.js
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// Convert an HTML file from a ZIP archive to PDF
PdfDocument.fromZip("./html-zip.zip", {
mainHtmlFile: "index.html"
}).then(async (pdf) => {
return await pdf.saveAs("html-zip-to-pdf.pdf");
});//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/zip-to-pdf.js
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// Convert an HTML file from a ZIP archive to PDF
PdfDocument.fromZip("./html-zip.zip", {
mainHtmlFile: "index.html"
}).then(async (pdf) => {
return await pdf.saveAs("html-zip-to-pdf.pdf");
});
Creación de PDF usando PdfDocument.fromZip. La función renderiza correctamente el código HTML del archivo ZIP junto con sus recursos agrupados.
¿Qué opciones de renderizado avanzadas soporta IronPDF? {#advanced-rendering-options}
La interfaz ChromePdfRenderOptions expone propiedades para la personalización granular del comportamiento de renderizado de PDF. Estas configuraciones se aplican antes de que se genere el PDF y cubren el diseño, la apariencia visual y casos límite para contenido dinámico.
IronPDF aplica configuraciones de renderizado predeterminadas a cada conversión. Recupera estos valores predeterminados con la función defaultChromePdfRenderOptions:
//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/default-options.js
import { defaultChromePdfRenderOptions } from "@ironsoftware/ironpdf";
// Retrieve a ChromePdfRenderOptions object with default settings
var options = defaultChromePdfRenderOptions();//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/default-options.js
import { defaultChromePdfRenderOptions } from "@ironsoftware/ironpdf";
// Retrieve a ChromePdfRenderOptions object with default settings
var options = defaultChromePdfRenderOptions();Modifica las propiedades del objeto devuelto según sea necesario y pásalo al parámetro renderOptions de cualquier método de conversión.
¿Cómo agregar encabezados y pies de página? {#add-headers-footers}
Las propiedades textHeader y textFooter afianzan contenido personalizado basado en texto en cada página de un nuevo PDF renderizado. El ejemplo siguiente crea un PDF desde la página de inicio de búsqueda de Google con un encabezado y pie de página personalizados, cada uno con una fuente diferente:
//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/custom-headers-footers.js
import { PdfDocument, defaultChromePdfRenderOptions, AffixFonts } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// Start from default render options
var options = defaultChromePdfRenderOptions();
// Configure a text-based header
options.textHeader = {
centerText: "https://www.adobe.com",
dividerLine: true,
font: AffixFonts.CourierNew,
fontSize: 12,
leftText: "URL to PDF"
};
// Configure a 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 the page with custom headers and footers applied
PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
return await pdf.saveAs("add-custom-headers-footers-1.pdf");
});//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/custom-headers-footers.js
import { PdfDocument, defaultChromePdfRenderOptions, AffixFonts } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// Start from default render options
var options = defaultChromePdfRenderOptions();
// Configure a text-based header
options.textHeader = {
centerText: "https://www.adobe.com",
dividerLine: true,
font: AffixFonts.CourierNew,
fontSize: 12,
leftText: "URL to PDF"
};
// Configure a 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 the page with custom headers and footers applied
PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
return await pdf.saveAs("add-custom-headers-footers-1.pdf");
});
Un PDF generado a partir de la página principal de Google con un encabezado y pie de página de texto personalizados aplicados usando textHeader y textFooter.
Para diseños de encabezado y pie de página más ricos, usa las propiedades htmlHeader y htmlFooter en su lugar. Estas aceptan fragmentos de HTML sin procesar, dando control total sobre tipografía, imágenes y alineación. El siguiente ejemplo centra la URL de la página en negrita en el encabezado e incrusta una imagen de logo en el pie de página:
//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/html-headers-footers.js
import { PdfDocument, defaultChromePdfRenderOptions } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// Start from default render options
var options = defaultChromePdfRenderOptions();
// Define a rich HTML header
options.htmlHeader = {
htmlFragment: "<strong>https://www.google.com/</strong>",
dividerLine: true,
dividerLineColor: "blue",
loadStylesAndCSSFromMainHtmlDocument: true,
};
// Define a rich HTML footer with a logo
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
};
// Apply custom HTML headers and footers during rendering
await PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
return await pdf.saveAs("add-html-headers-footers.pdf");
});//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/html-headers-footers.js
import { PdfDocument, defaultChromePdfRenderOptions } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// Start from default render options
var options = defaultChromePdfRenderOptions();
// Define a rich HTML header
options.htmlHeader = {
htmlFragment: "<strong>https://www.google.com/</strong>",
dividerLine: true,
dividerLineColor: "blue",
loadStylesAndCSSFromMainHtmlDocument: true,
};
// Define a rich HTML footer with a logo
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
};
// Apply custom HTML headers and footers during rendering
await PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
return await pdf.saveAs("add-html-headers-footers.pdf");
});
IronPDF soporta encabezados y pies de página basados en HTML, dando control total sobre la marca y el diseño en cada página.
¿Cómo controlas el tamaño de página, orientación y márgenes? {#page-size-orientation-margins}
Las propiedades margin, paperSize, fitToPaperMode, paperOrientation y grayScale en ChromePdfRenderOptions controlan el diseño físico de cada página renderizada. El ejemplo siguiente convierte la página de inicio de Google con márgenes personalizados, orientación apaisada A5 y salida en escala de grises:
//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/page-size-orientation.js
import { PdfDocument, defaultChromePdfRenderOptions, PaperSize, FitToPaperModes, PdfPaperOrientation } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// Start from default render options
var options = defaultChromePdfRenderOptions();
// Set page margins in millimeters
options.margin = {
top: 50,
bottom: 50,
left: 60,
right: 60
};
// Configure paper size, fit mode, orientation, and color mode
options.paperSize = PaperSize.A5;
options.fitToPaperMode = FitToPaperModes.FitToPage;
options.paperOrientation = PdfPaperOrientation.Landscape;
options.grayScale = true;
// Render with the customized layout settings
PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
return await pdf.saveAs("set-margins-and-page-size.pdf");
});//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/page-size-orientation.js
import { PdfDocument, defaultChromePdfRenderOptions, PaperSize, FitToPaperModes, PdfPaperOrientation } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// Start from default render options
var options = defaultChromePdfRenderOptions();
// Set page margins in millimeters
options.margin = {
top: 50,
bottom: 50,
left: 60,
right: 60
};
// Configure paper size, fit mode, orientation, and color mode
options.paperSize = PaperSize.A5;
options.fitToPaperMode = FitToPaperModes.FitToPage;
options.paperOrientation = PdfPaperOrientation.Landscape;
options.grayScale = true;
// Render with the customized layout settings
PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
return await pdf.saveAs("set-margins-and-page-size.pdf");
});La enumeración PaperSize incluye tamaños de papel estándar como A4, A5, Letter y Legal. La enumeración PdfPaperOrientation admite Portrait y Landscape. Estas configuraciones permiten un control preciso sobre las dimensiones de salida para documentos listos para imprimir.
¿Cómo manejas las páginas web dinámicas? {#dynamic-web-pages}
Las páginas que cargan contenido de forma asincrónica —a través de temporizadores de JavaScript, carga diferida, o llamadas API— pueden no estar completamente renderizadas cuando el motor de IronPDF las captura. El mecanismo WaitFor, configurado a través de la propiedad waitFor en ChromePdfRenderOptions, instruye al renderizador de Chrome para pausar hasta que se cumplan condiciones específicas antes de capturar la página.
El siguiente bloque de código configura IronPDF para esperar 20 segundos antes de capturar el contenido de la página:
//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/waitfor-delay.js
import { PdfDocument, defaultChromePdfRenderOptions, WaitForType } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// Configure the renderer to wait 20 seconds before capturing
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");
});//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/waitfor-delay.js
import { PdfDocument, defaultChromePdfRenderOptions, WaitForType } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// Configure the renderer to wait 20 seconds before capturing
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");
});Alternativamente, configure IronPDF para esperar hasta que aparezca un elemento DOM específico antes de renderizar. Esto es útil para páginas donde el contenido se inyecta después de que un framework de JavaScript termina de montar:
//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/waitfor-element.js
import { PdfDocument, defaultChromePdfRenderOptions, WaitForType } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// Configure the renderer to wait for a specific DOM element (up to 20 seconds)
var options = defaultChromePdfRenderOptions();
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");
});//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/waitfor-element.js
import { PdfDocument, defaultChromePdfRenderOptions, WaitForType } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// Configure the renderer to wait for a specific DOM element (up to 20 seconds)
var options = defaultChromePdfRenderOptions();
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");
});La estrategia WaitForType.HtmlElement utiliza un selector de consulta CSS estándar. El renderizador sondea la presencia del elemento hasta que transcurren maxWaitTime milisegundos o se encuentra el elemento, lo que ocurra primero.
¿Cómo generas PDFs a partir de una plantilla HTML? {#html-template-to-pdf}
Un patrón común de automatización en el mundo real es generar un lote de PDFs a partir de una plantilla HTML compartida, sustituyendo valores de marcador de posición con datos de una base de datos, API, o hoja de cálculo. El método replaceText de IronPDF en PdfDocument maneja esto directamente.
La plantilla de factura de muestra a continuación (adaptada de una plantilla de factura de CodePen públicamente accesible) usa marcadores de posición con llaves como {COMPANY-NAME}, {FULL-NAME} y {INVOICE-NUMBER} para contenido sustituible:
Una plantilla de factura de muestra con etiquetas de marcador de posición. El código de JavaScript reemplazará cada etiqueta con datos reales antes de que el documento se guarde como PDF.
El siguiente código carga la plantilla, reemplaza cada marcador de posición con datos de prueba y guarda el resultado como PDF:
//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/html-template-to-pdf.js
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
/**
* Loads an HTML template from the file system as a PdfDocument.
*/
async function getTemplateHtml(fileLocation) {
return PdfDocument.fromHtml(fileLocation);
}
/**
* Saves a PdfDocument to the specified file path.
*/
async function generatePdf(pdf, location) {
return pdf.saveAs(location);
}
/**
* Replaces a named placeholder in the PdfDocument with a data value.
*/
async function addTemplateData(pdf, key, value) {
return pdf.replaceText(key, value);
}
// Path to the HTML invoice template
const template = "./sample-invoice.html";
// Load the template, fill in all placeholder values, then save the PDF
getTemplateHtml(template).then(async (doc) => {
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"));//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/html-template-to-pdf.js
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
/**
* Loads an HTML template from the file system as a PdfDocument.
*/
async function getTemplateHtml(fileLocation) {
return PdfDocument.fromHtml(fileLocation);
}
/**
* Saves a PdfDocument to the specified file path.
*/
async function generatePdf(pdf, location) {
return pdf.saveAs(location);
}
/**
* Replaces a named placeholder in the PdfDocument with a data value.
*/
async function addTemplateData(pdf, key, value) {
return pdf.replaceText(key, value);
}
// Path to the HTML invoice template
const template = "./sample-invoice.html";
// Load the template, fill in all placeholder values, then save the PDF
getTemplateHtml(template).then(async (doc) => {
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"));El código anterior define tres funciones auxiliares asíncronas:
getTemplateHtml: Carga un archivo HTML en un objetoPdfDocumentusandoPdfDocument.fromHtml.addTemplateData: Llama aPdfDocument.replaceTextpara sustituir una clave de marcador de posición con su valor de datos real.generatePdf: Escribe elPdfDocumentcompletado a una ruta de archivo de destino.
Cada llamada a replaceText opera directamente sobre la representación PDF en memoria, por lo que se pueden encadenar múltiples reemplazos sin volver a cargar el documento desde el disco. El PDF resultante retiene todos los estilos CSS, fuentes y diseño de la plantilla original.
La factura PDF completa con valores de marcador de posición reemplazados por datos reales. Los estilos CSS y el diseño de la plantilla original se conservan exactamente.
Este enfoque escala bien para la generación de documentos por lotes. Llama a getTemplateHtml una vez por registro para crear un nuevo PdfDocument para cada archivo de salida, luego encadena las llamadas a addTemplateData para los datos de ese registro antes de llamar a generatePdf.
¿Cuáles son los próximos pasos? {#next-steps}
Este tutorial cubre los métodos principales de conversión de HTML a PDF y las opciones de renderizado más utilizadas en IronPDF for Node.js. Los temas a continuación extienden lo que ha aprendido aquí en áreas más especializadas.
- Editar y Estampar PDFs en Node.js — Aplique sellos, anotaciones y ediciones de texto a documentos PDF existentes programáticamente.
- Unir y Dividir PDFs en Node.js — Combine múltiples PDFs en un solo documento o divida un PDF en páginas separadas.
- Agregar Marcas de Agua a PDFs en Node.js — Aplique marcas de agua de texto o imagen en cada página de un PDF con control de posicionamiento preciso.
- Referencia de API de IronPDF Node.js — Explora la API completa para
PdfDocument,ChromePdfRenderOptions,WaitFor,AffixFontsy todas las demás clases e interfaces exportadas. - Obtenga una Clave de Licencia de Prueba Gratuita — Genere PDFs de calidad de producción sin marcas de agua activando una licencia de prueba gratuita de 30 días.
Preguntas Frecuentes
¿Cómo se convierte HTML a PDF en Node.js?
Usa la biblioteca IronPDF. Instálala con npm install @ironsoftware/ironpdf, luego llama a PdfDocument.fromHtml con una cadena HTML o ruta de archivo, o PdfDocument.fromUrl con una dirección web. Guarda el resultado con PdfDocument.saveAs.
¿Cómo se convierte una cadena de HTML a PDF en Node.js?
Llama a PdfDocument.fromHtml con la cadena HTML como argumento. El método devuelve una Promesa que se resuelve en una instancia de PdfDocument. Encadena saveAs en el resultado para escribir el PDF en el disco.
¿Cómo se convierte un archivo HTML local a PDF en Node.js?
Pasa una ruta válida del sistema de archivos a PdfDocument.fromHtml en lugar de una cadena HTML. IronPDF resuelve rutas relativas de CSS, imágenes y scripts de la misma manera que un navegador al cargar el archivo.
¿Cómo se convierte una URL a PDF en Node.js?
Llama a PdfDocument.fromUrl con la URL objetivo. IronPDF obtiene la página usando su motor de renderizado Chrome y produce un PDF de píxeles perfectos. La URL objetivo debe ser accesible públicamente desde el host que ejecuta IronPDF.
¿Cómo se añaden encabezados y pies de página a un PDF en Node.js?
Configura las propiedades textHeader y textFooter en un objeto ChromePdfRenderOptions para encabezados y pies de página de texto simples. Para diseños más ricos, usa htmlHeader y htmlFooter con fragmentos HTML en bruto. Pasa el objeto de opciones al parámetro renderOptions de cualquier método de conversión.
¿Cómo se cambia el tamaño de página y la orientación en IronPDF for Node.js?
Establece options.paperSize a un valor del enumerado PaperSize (como PaperSize.A4 o PaperSize.Letter) y establece options.paperOrientation en PdfPaperOrientation.Portrait o PdfPaperOrientation.Landscape. Pasa las opciones configuradas al método de conversión.
¿Cómo se maneja el contenido dinámico de JavaScript al convertir a PDF?
Usa la propiedad waitFor en ChromePdfRenderOptions. Establece type en WaitForType.RenderDelay y proporciona un retraso en milisegundos, o establece type en WaitForType.HtmlElement y proporciona un selector de consulta CSS. IronPDF pausará el renderizado hasta que se cumpla la condición.
¿Cómo se convierte un archivo HTML dentro de un archivo ZIP a PDF?
Llama a PdfDocument.fromZip con la ruta al archivo ZIP como primer argumento y un objeto de opciones como segundo. Establece la propiedad mainHtmlFile en el nombre del archivo HTML dentro del archivo que debe ser convertido.
¿Cómo se elimina la marca de agua de IronPDF de los PDFs generados?
Aplica una clave de licencia válida a la configuración global antes de llamar a cualquier método de conversión. Recupera el objeto de configuración con IronPdfGlobalConfig.getConfig() y establece config.licenseKey en tu clave. Una licencia de prueba gratuita está disponible en ironpdf.com.
¿Cómo se generan PDFs a partir de una plantilla HTML en Node.js?
Carga la plantilla con PdfDocument.fromHtml, luego llama a PdfDocument.replaceText para cada marcador de posición en la plantilla, pasando la cadena de marcador de posición y su valor de reemplazo. Una vez completadas todas las sustituciones, llama a saveAs para escribir el PDF final.





