HTML a PDF NodeJS

Instalar la biblioteca IronPDF for Node.js

Instala el paquete de IronPDF Node.js ejecutando el comando NPM que se proporciona a continuación en tu proyecto de Node elegido:

npm install @ironsoftware/ironpdf

npm install @ironsoftware/ironpdf

También puedes descargar e instalar el paquete de IronPDF manualmente.

Instalación manual del motor IronPDF (opcional)

IronPDF para Node.js actualmente requiere un Binario del Motor IronPDF para funcionar correctamente.

Instala el binario del Motor IronPDF instalando el paquete adecuado para tu sistema operativo:

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 usar IronPDF sin la marca del agua adicional, debes establecer la propiedad licenseKey en el objeto global IronPdfGlobalConfig con una clave de licencia válida. El código fuente para hacer esto se presenta a continuación:

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

// Get the global config object
var config = IronPdfGlobalConfig.getConfig();

// Set the license key for IronPDF
config.licenseKey = "{YOUR-LICENSE-KEY-HERE}";

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

// Get the global config object
var config = IronPdfGlobalConfig.getConfig();

// Set the license key for IronPDF
config.licenseKey = "{YOUR-LICENSE-KEY-HERE}";

Compra una clave de licencia desde nuestra página de licencias, o contáctanos para obtener una clave de licencia de prueba gratuita.

Las siguientes secciones 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 dondequiera que utilicemos la funcionalidad de IronPDF:

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// ...

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script
// ...

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 marcado de página web en bruto.

Este método ofrece la mayor flexibilidad de los tres enfoques. Esto se debe a que los datos de la cadena HTML pueden provenir prácticamente de cualquier parte: archivos de texto, flujos de datos, una plantilla HTML, datos HTML generados, etc.

El siguiente ejemplo de código demuestra cómo usar el método PdfDocument.fromHtml en la práctica:

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// 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'; // Import the configuration script

// 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 mostró anteriormente, 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 Promesa que se resuelve en una instancia de la clase PdfDocument. Un PdfDocument representa un archivo PDF que la biblioteca ha producido a partir de algún contenido fuente. Esta clase forma la piedra angular de la mayoría de las características principales de IronPDF, impulsando el uso significativo en la creación y edición de PDFs.

Finalmente, usamos el método saveAs en el PdfDocument para guardar el archivo en el disco. El archivo PDF guardado se muestra abajo.

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 la página web.

Crear un archivo PDF a partir de un archivo HTML

PdfDocument.fromHtml no solo funciona con cadenas HTML. El método también acepta una ruta a un documento HTML local.

En nuestro siguiente ejemplo, trabajaremos con esta página web de muestra.

Nuestra página HTML de muestra tal como aparece en Google Chrome. Descarga esta página y otras similares desde el sitio web de 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 "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// 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 "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

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

Hemos incluido el contenido del PDF resultante a continuación. Observa que IronPDF no solo conserva la apariencia del documento HTML original, sino que también mantiene la funcionalidad de enlaces, formularios y otros elementos interactivos comunes.

Este PDF fue generado a partir del ejemplo de código anterior. Compara su apariencia con la imagen anterior, ¡y nota la notable semejanza!

Si has examinado el código fuente de la página de muestra, notarás que es más complejo. Usa 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 una cierta cantidad de scripts (utilizados para configurar cookies).

IronPDF es capaz de renderizar contenido web que es mucho más complejo que lo que hemos estado usando hasta ahora. Para demostrar esto, consideremos la página siguiente:

Un artículo escrito sobre Puppeteer, una biblioteca Node popularizada por su capacidad para controlar Chrome mediante programación utilizando una instancia de navegador sin cabeza

La página que se muestra arriba es de un artículo escrito sobre la biblioteca Puppeteer para Node. Puppeteer ejecuta sesiones de navegador sin cabeza que los desarrolladores de Node utilizan para automatizar numerosas tareas del navegador en el lado del servidor o en el lado del cliente (una de las cuales incluye la generación de PDF en el servidor de HTML).

La nueva página tiene numerosas fuentes de activos (archivos CSS, imágenes, archivos de scripts, etc.) y utiliza un diseño aún más complejo. Para este siguiente ejemplo, convertiremos una copia guardada de esta página (junto con sus activos de origen) en un PDF con precisión de píxel.

El fragmento de código a continuación asume que la página está guardada en el mismo directorio que nuestro proyecto como "sample4.html":

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

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

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Render a PDF from even more complex HTML code.
PdfDocument.fromHtml("./sample4.html").then(async (pdf) => {
    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 PDF. Esto incluye diseños de páginas pesadas en 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. No estás limitado solo a usar marcado bruto de cadenas y archivos, sin embargo. IronPDF también puede solicitar HTML desde una URL.

Considera el artículo de Wikipedia ubicado en https://en.wikipedia.org/wiki/PDF.

El artículo de Wikipedia sobre el formato PDF, tal como aparece en un navegador web compatible con estándares.

Usa este código fuente para convertir este artículo de Wikipedia en un PDF:

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// 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'; // Import the configuration script

// 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 usamos 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 para la dirección web por ti y lo renderizará sin problemas. ¡No se requieren archivos HTML ni cadenas de texto!

[Figura 8](/static-assets/ironpdf-nodejs tutorials/html-to-pdf/html-to-pdf-9.webp) El PDF generado al llamar a PdfDocument.fromUrl en un artículo de Wikipedia. Ten en cuenta sus similitudes con la página web original.

Crear un archivo PDF a partir de un archivo Zip

Usa 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.png

El 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 de 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 muestra el logotipo de nuestro producto:

La imagen de muestra dentro de un archivo zip HTML hipotético.

Al llamar al método fromZip, especifica una ruta válida al zip en el primer argumento, junto con un objeto JSON que establece 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 manera similar:

import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Render the HTML from a zip archive
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'; // Import the configuration script

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

[Figura 10](/static-assets/ironpdf-nodejs tutorials/html-to-pdf html-to-pdf-11.webp) Creación de PDF usando la función PdfDocument.fromZip. Esta función renderiza correctamente el código HTML contenido en el archivo ZIP, con sus activos contenidos.

Personalizar la salida de generación de PDF

import { PdfDocument, defaultChromePdfRenderOptions, AffixFonts } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Initialize render options with default settings
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 a URL
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'; // Import the configuration script

// Initialize render options with default settings
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 a URL
PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("add-custom-headers-footers-1.pdf");
});

import { PdfDocument, defaultChromePdfRenderOptions } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Initialize render options with default settings
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
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 a URL
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'; // Import the configuration script

// Initialize render options with default settings
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
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 a URL
await PdfDocument.fromUrl("https://www.google.com/", { renderOptions: options }).then(async (pdf) => {
  return await pdf.saveAs("add-html-headers-footers.pdf");
});

import { PdfDocument, defaultChromePdfRenderOptions, PaperSize, FitToPaperModes, PdfPaperOrientation } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Initialize render options with default settings
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'; // Import the configuration script

// Initialize render options with default settings
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");
});

Generar PDF a partir de páginas web dinámicas

Para las páginas web que contienen contenido que no está disponible inmediatamente y se renderiza al cargar la página, puede ser necesario pausar la renderización del contenido de esa página hasta que se hayan satisfecho ciertas condiciones.

Por ejemplo, el desarrollador puede querer generar un PDF que contenga contenido que solo aparece 15 segundos después de que se cargue la página. En otro caso, este mismo contenido puede aparecer solo una vez que se ejecute algún código complejo del lado del cliente.

Para manejar ambos casos límite (y muchos más), la versión de Node de IronPDF define el mecanismo WaitFor. Los desarrolladores pueden incluir esta propiedad en sus configuraciones ChromePdfRenderOptions para instruir al motor de renderizado de Chrome de IronPDF a convertir el contenido de una página cuando ocurran ciertos eventos.

El siguiente bloque de código configura a IronPDF para esperar 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'; // Import the configuration script

// 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'; // Import the configuration script

// 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 a IronPDF para esperar hasta que se pueda seleccionar con éxito un elemento en un editor de texto SEO popular.

import { PdfDocument, defaultChromePdfRenderOptions, WaitForType } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Configure the Chrome Renderer to wait up to 20 seconds for a specific element to appear
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");
});

import { PdfDocument, defaultChromePdfRenderOptions, WaitForType } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

// Configure the Chrome Renderer to wait up to 20 seconds for a specific element to appear
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");
});