HTML a PDF NodeJS
La capacidad de crear PDF de alta fidelidad a partir de HTML, CSS y JavaScript sin procesar es la función más potente y popular de IronPDF. Este tutorial es un manual completo para ayudar a los desarrolladores de Node a aprovechar IronPDF para incorporar la generación de HTML a PDF en sus propios proyectos._
_IronPDF es una biblioteca API de alto nivel que ayuda a los desarrolladores a implementar potentes y sólidas funciones de procesamiento de PDF en aplicaciones de software de forma rápida y sencilla. IronPDF está disponible envarios lenguajes de programación. Para obtener una cobertura detallada sobre cómo crear PDFs en.NET, JavayPython, consulte la documentación oficialpáginas. Este tutorial cubre su uso en proyectos Node.js.
Cómo convertir HTML a PDF en Node.js
- Instale la biblioteca HTML to PDF Node a través de NPM:
npm install @ironsoftware/ironpdf. - Importe el DocumentoPdf de la clase
@ironsoftware/ironpdfpaquete. - Convertir a partir de una cadena HTML, un archivo o una URL web.
- (opcional) Añada encabezados y pies de página, cambie el tamaño, la orientación y el color de la página.
- Llame a
PdfDocument.saveAspara guardar el PDF generado
Primeros pasos
Comience a usar IronPDF en su proyecto hoy con una prueba gratuita.
Instalar la biblioteca IronPDF for Node.js
Instale el paquete IronPDF Node.js ejecutando el comando NPM que se indica a continuación en el proyecto Node que haya elegido:
npm install @ironsoftware/ironpdfTambién puede descargar e instalar el paquete IronPDFmanualmente.
Instalación manual del motor IronPDF (opcional)
IronPDF for Node.js actualmente requiere unMotor binario IronPDF funcione correctamente.
Instale el binario del motor IronPDFinstalar el paquete adecuado para su sistema operativo:
Atención
@ironpdf descargará e instalará automáticamente el binario adecuado para su navegador y sistema operativo desde NPM en su primera ejecución. Sin embargo, instalar este binario explícitamente será vital en situaciones en las que el acceso a Internet sea limitado, reducido o no deseado.Aplicar una clave de licencia (opcional)
Por defecto, IronPDF marcará todos los documentos que genere o modifique con una marca de agua de fondo titulada.
**Obtén una clave de licencia en ironpdf.com/nodejs/licensing/ para generar documentos PDF sin marcas de agua.
Para utilizar IronPDF sin la marca de agua añadida, debe establecer la propiedad licenseKey en el objeto global IronPdfGlobalconfig con una clave de licencia válida. A continuación se muestra el código fuente para conseguirlo:
import {IronPdfGlobalConfig} from "@ironsoftware/ironpdf";
var config = IronPdfGlobalConfig.getConfig();
config.licenseKey = "{YOUR-LICENSE-KEY-HERE}";Comprar una clave de licencia de nuestra página de licencias, o póngase en contacto con nosotros paraobtener una clave de licencia de prueba gratuita.
Atención
Las secciones siguientes de este tutorial asumirán que tenemos una clave de licencia y que la hemos establecido en un archivo JavaScript separado llamado config.js. Importamos este script siempre que vayamos a hacer uso de la funcionalidad de IronPDF:
import {PdfDocument} from "@ironsoftware/ironpdf";
import('./config.js');
// ...Convertir HTML a PDF
La versión Node de la librería IronPDF ofrece tres enfoques para crear archivos PDF a partir de contenido HTML:
A partir de una cadena de código HTML
Desde un archivo HTML local
En un sitio web
En esta sección se explican detalladamente los tres métodos.
Crear un archivo PDF a partir de una cadena HTML
PdfDocument.fromHtml es un método que permite generar PDFs a partir de cadenas de código de páginas web.
Este método es el más flexible de los tres. Esto se debe a que los datos de la cadena HTML pueden proceder prácticamente de cualquier lugar: archivos de texto, flujos de datos, una plantilla HTML, datos HTML generados, etc.
El siguiente ejemplo de código muestra cómo utilizar el método PdfDocument.fromHtml en la práctica:
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");Como se muestra arriba, llamamos al método PdfDocument.fromHtml con una cadena de texto que contiene el código de marcado para un elemento de encabezado de nivel uno.
PdfDocument.fromHtml devuelve una Promise que resuelve a una instancia del archivoDocumentoPdf clase. Un PdfDocument representa un archivo PDF que la biblioteca ha producido a partir de algún contenido fuente. Esta clase constituye la piedra angular de la mayoría de las funciones principales de IronPDF, impulsando importantes casos de uso de creación y edición de PDF.
Por último, utilizamos el método saveAs en el PdfDocument para guardar el archivo en el disco. A continuación se muestra el archivo PDF guardado.
El PDF generado a partir de la cadena HTML "<h1>Hola desde IronPDF!</h1>". Los archivos PDF que genera PdfDocument.fromHtml aparecen igual que aparecería el contenido de una página web.
Crear un archivo PDF a partir de un archivo HTML
PdfDocument.fromHtml no sólo funciona con cadenas HTML. El método también acepta una ruta a un documento HTML local.
En nuestro siguiente ejemplo, trabajaremos con esteejemplo de página web.
Nuestro ejemplo de página HTML tal y como aparece en Google Chrome. Descargue esta página y otras similares del sitio web File Samples: https://filesamples.com/samples/code/html/sample2.html
Las siguientes líneas de código convierten todo el documento de muestra en un PDF. En lugar de una cadena HTML, llamamos a PdfDocument.fromHtml con una ruta de archivo válida a nuestro archivo de muestra:
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");A continuación incluimos el contenido del PDF resultante. Observe que IronPDF no sólo conserva la apariencia del documento HTML original, sino también la funcionalidad de los enlaces, formularios y otros elementos interactivos comunes.
Este PDF se generó a partir del ejemplo de código anterior. Compare su aspecto con el de la imagen anterior, y observe el notable parecido!
Si ha examinado el código fuente de la página de muestra, observará que es más complejo. Utiliza más tipos de elementos HTML(párrafos, listas desordenadas, saltos de línea, reglas horizontales, hipervínculos, imágenes, etc.) y también incluye algunas secuencias de comandos(utilizado para configurar las cookies).
IronPDF es capaz de renderizar contenidos web mucho más complejos que los que hemos estado utilizando hasta ahora. Para demostrarlo, veamos la siguiente página:
Un artículo escrito sobre Puppeteer, una librería Node popularizada por su capacidad para controlar Chrome mediante programación utilizando una instancia de navegador headless.
La página representada arriba es de un artículo escrito sobre la biblioteca Puppeteer Node. Puppeteer ejecuta sesiones de navegador sin cabeza que los desarrolladores de Node utilizan para automatizar numerosas tareas de navegador en el lado del servidor o en el lado del cliente.(uno de los cuales incluye la generación de PDF HTML en el servidor).
La nueva página contiene numerosos recursos(Archivos CSS, imágenes, archivos de script, etc.) y utiliza un diseño aún más complejo. Para el siguiente ejemplo, convertiremos una copia guardada de esta página(junto con sus activos de origen) en un PDF perfecto.
El siguiente fragmento de código asume que la página se guarda en el mismo directorio que nuestro proyecto como "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");
});La siguiente imagen muestra los resultados del fragmento de código anterior.
**Si se ve bien en Google Chrome, entonces se verá bien cuando se convierta en un PDF. Esto incluye diseños de páginas con CSS y JavaScript.
Crear un archivo PDF a partir de una URL
IronPDF puede convertir cadenas HTML y archivos HTML de cualquier tamaño y complejidad. Sin embargo, no está limitado al uso de marcas sin procesar de cadenas y archivos. IronPDF también puede solicitar HTML desde una URL.
Véase el artículo de Wikipedia enhttps://en.wikipedia.org/wiki/PDF.
**El artículo de Wikipedia sobre el formato PDF, tal y como aparece en un navegador web compatible con los estándares.
Utiliza este código fuente para convertir este artículo de Wikipedia en un 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");Arriba, utilizamos PdfDocument.fromUrl para convertir la página web en un PDF en unas pocas líneas de código. IronPDF obtendrá el código HTML de la dirección web por usted y lo renderizará sin problemas. No se necesitan archivos HTML ni cadenas de texto!
El PDF generado al llamar a PdfDocument.fromUrl en un artículo de Wikipedia. Observa sus similitudes con la página web original.
Crear un archivo PDF a partir de un archivo Zip
Utilice PdfDocument.fromZip para convertir un archivo HTML específico ubicado en un archivo comprimido(zip) en un PDF.
Por ejemplo, supongamos que tenemos un archivo Zip en el directorio del proyecto con la siguiente estructura interna:
html-zip.zip
├─ index.html
├─ style.css
├─ logo.pngEl archivo index.html contiene el código:
<!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 declara cinco reglas 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;
}Por último, logo.png representa el logotipo de nuestro producto:
La imagen de muestra dentro de un hipotético archivo HTML zip.
Cuando llame al método fromZip, especifique una ruta válida al zip en el primer argumento, junto con un objeto JSON que establezca la propiedad mainHtmlFile con el nombre del archivo HTML del zip que queremos convertir.
Convertimos el archivo index.html dentro de la carpeta zip de la misma manera:
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");
});
Creación de PDF mediante la función PdfDocument.fromZip. Esta función renderiza con éxito el código HTML contenido en el archivo ZIP, con sus activos contenidos.
Opciones avanzadas de generación de HTML a PDF
EnChromePdfRenderOptions permite a los desarrolladores de Node modificar el comportamiento de renderizado HTML de la biblioteca. Las propiedades allí expuestas permiten una personalización granular de la apariencia de los PDF antes de su renderización. Además, permiten tratar casos extremos específicos de conversión HTML-PDF.
IronPDF renderiza inicialmente los nuevos PDF utilizando algunos valores predeterminados de ChromePdfRenderOptions. Puede consultar estos valores preestablecidos llamando a la función defaultChromePdfRenderOptions:
// Retrieve a ChromePdfRenderOptions object with default settings.
var options = defaultChromePdfRenderOptions();Esta sección repasará los casos de uso más populares de renderizado de HTML a PDF que requieren el uso de la interfaz ChromePdfRenderOptions.
Cada subsección comenzará con los valores preestablecidos y los modificará según sea necesario para lograr el resultado deseado.
Personalizar la salida de generación de PDF
Añadir encabezados y pies de página personalizados
Con las propiedades textHeader y textFooter, puede adjuntar contenido personalizado de encabezado y/o pie de página a los PDF recién renderizados.
El siguiente ejemplo crea una versión en PDF de la página de inicio de la búsqueda de Google con un encabezado y un pie de página personalizados a partir de contenido de texto. Utilizamos líneas divisorias para separar este contenido del cuerpo de la página. También utilizamos fuentes distintas en la cabecera y el pie de página para que las distinciones sean más claras.
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");
});El código fuente produce este PDF:
Se ha creado una nueva página en formato PDF, generada a partir de la página de inicio de Google. Obsérvese la inclusión de cabeceras y pies de página adicionales.
Para controlar aún más el diseño, la posición y el contenido de la cabecera y el pie de página, también puede definirlos utilizando HTML sin formato en lugar de texto.
En el bloque de código siguiente, utilizamos HTML para incorporar contenido enriquecido en la cabecera y el pie de página. En la cabecera, ponemos en negrita y centramos la URL de la página; en el pie de página, incrustamos y centramos un logotipo.
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");
});La imagen siguiente muestra el resultado de estos cambios.
**IronPDF for Node.js puede aplicar personalizaciones a sus páginas HTML mientras las convierte en PDF.
Establecer márgenes, tamaños de página, orientación de página y color
IronPDF admite configuraciones adicionales para definir márgenes de página personalizados, tamaños de página y orientaciones de página para los PDF recién convertidos.
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");
});En el bloque de código anterior, configuramos IronPDF para generar nuestro PDF de la página de inicio de Google en escala de grises con orientación horizontal y con al menos 50 milímetros de espacio de margen. También ajustamos el contenido al tamaño de papel A5.
Generar PDF a partir de páginas web dinámicas
En el caso de las páginas web que contienen contenidos que no están disponibles inmediatamente y que no se renderizan al cargar la página, puede ser necesario pausar la renderización del contenido de esa página hasta que se cumplan determinadas condiciones.
Por ejemplo, el desarrollador puede querer generar un PDF con contenido que sólo aparezca 15 segundos después de que se cargue la página. En otro caso, puede que este mismo contenido sólo aparezca una vez que se ejecute algún código complejo del lado del cliente.
Para tratar estos dos casos extremos(y muchos más)La versión Node de IronPDF define el mecanismo WaitFor. Los desarrolladores pueden incluir esta propiedad en su configuración ChromePdfRenderOptions para indicar al motor de renderizado Chrome de IronPDF que convierta el contenido de una página cuando se produzcan determinados eventos.
El siguiente bloque de código configura IronPDF para que espere a que transcurran 20 segundos antes de capturar el contenido de nuestra página de inicio como 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");
});El siguiente bloque de código configura IronPDF para que espere hasta que un elemento de un popularEditor de texto SEO puede seleccionarse correctamente.
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");
});Generar PDF a partir de una plantilla HTML
En la sección final de este tutorial, aplicaremos todos los conocimientos introducidos en las secciones anteriores para realizar una automatización muy práctica: generar uno o varios PDF utilizando una plantilla HTML.
La plantilla que utilizaremos para esta sección se muestra a continuación. Se adaptó a partir de este documento de acceso públicofactura plantilla para incluir etiquetas de marcador de posición(Por ejemplo{NOMBRE DE LA EMPRESA}, {NOMBRE}, {NÚMERO DE FACTURA}etc.) para contenidos sustituibles.
Un modelo de factura. Escribiremos código JavaScript adicional que añadirá datos dinámicos a esta plantilla antes de generarla en PDFs.
Antes de continuar, puededescargar esta plantilla HTML y examínela en su IDE preferido.
En el siguiente bloque de código fuente, cargaremos la plantilla HTML en un nuevo objeto PdfDocument, sustituiremos los marcadores de posición que hemos definido por algunos datos de prueba ficticios y, a continuación, guardaremos el objeto PdfDocument en el sistema de archivos.
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"));El código fuente anterior define tres funciones de ayuda asíncronas:
getTemplateHtml: utiliza el métodoPdfDocument.fromHtmlpara cargar una plantilla HTML en un nuevo objetoPdfDocument.addTemplateData: utiliza el métodoPdfDocument.replaceTextpara sustituir un marcador de posición proporcionado.(denominada clave)con su valor de datos de sustitución.generatePdf: guarda unPdfDocumenten una ubicación dada.Además, declaramos una variable
const templatepara guardar la ubicación de nuestro archivo de plantilla HTML. A continuación se muestra el PDF generado a partir del código fuente anterior.
El nuevo documento PDF creado a partir de la sustitución de marcadores de posición definidos en una plantilla HTML por datos reales. Este documento conserva los estilos CSS y el diseño que cabría esperar si no se hubieran producido tales sustituciones.
Lecturas complementarias
Este tutorial sólo ha arañado la superficie de lo que es posible con las funciones de alto nivel de la API de IronPDF. Considere la posibilidad de estudiar estos temas relacionados para ampliar sus conocimientos y comprensión.
1.La clase `PdfGeneratorEsta es una clase de utilidad dedicada a la creación de objetos PdfDocument a partir de HTML, URLs, archivos Zip y otros medios de origen. Esta clase ofrece una alternativa viable al uso de las funciones de renderizado de PDF definidas en la clase PdfDocument.
2.HttpLoginCredentials: si alguna vez necesita generar PDF a partir de páginas web que requieren cookies específicas o que están protegidas por contraseña, esta referencia le resultará extremadamente útil.
