Convert HTML to PDF in Node.js

Installer la Bibliothèque IronPDF

Installez le package IronPDF Node.js en exécutant la commande NPM ci-dessous dans votre projet Node.js choisi :

 npm i @ironsoftware/ironpdf

Vous pouvez également télécharger et installer le package IronPDF manuellement.

Comment installer le moteur IronPDF ?

IronPDF for Node.js nécessite un fichier binaire IronPDF Engine pour fonctionner.

Installez le fichier binaire IronPDF Engine en installant le package approprié pour votre système d'exploitation.

Comment appliquer une clé de licence ?

Par défaut, IronPDF marque tous les documents qu'il génère ou modifie avec un filigrane. Pour supprimer le filigrane, définissez la propriété licenseKey sur l'objet global IronPdfGlobalConfig avec une clé de licence valide :

: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}";

Obtenez une clé de licence d'essai gratuite ou achetez une clé de licence depuis la page de licences.

Les exemples de code restants de ce tutoriel supposent qu'une clé de licence a été appliquée dans un fichier config.js séparé, qui est importé en haut de chaque 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
// ...

Obtenez une clé de licence sur ironpdf.com/nodejs/licensing/pour générer des documents PDF sans filigranes.

Comment créer un PDF à partir d'une chaîne HTML ?

PdfDocument.fromHtml génère des PDFs à partir de chaînes de balisage HTML brut. Cette approche offre la plus grande flexibilité des quatre méthodes car la chaîne HTML peut provenir virtuellement de partout — fichiers texte, flux de données, un moteur de modèles HTML, ou un balisage construit dynamiquement.

: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 retourne une Promesse qui se résout sur une instance de la classe PdfDocument. Après avoir obtenu l'instance, appelez saveAs avec un chemin de fichier cible pour écrire le PDF sur disque. Le fichier PDF enregistré rend le HTML exactement comme un navigateur conforme aux standards l'afficherait.

**The PDF generated from the HTML string <h1>Hello from IronPDF!</h1>. Les fichiers PDF générés par PdfDocument.fromHtml apparaissent exactement comme le contenu d'une page web.

Comment créer un PDF à partir d'un fichier HTML ?

PdfDocument.fromHtml accepte également un chemin vers un document HTML local. Au lieu d'une chaîne de balisage, passez un chemin de fichier valide en tant que premier argument. C'est l'approche préférée lors de l'utilisation de pages Web enregistrées qui référencent des CSS, JavaScript, et des ressources d'image locales.

L'exemple suivant convertit une page Web échantillon en 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 page HTML échantillon telle qu'elle apparaît dans Google Chrome. Téléchargez cette page et des pages similaires depuis le site File Samples : https://filesamples.com/samples/code/html/sample2.html

IronPDF préserve l'apparence du document HTML original et conserve la fonctionnalité des liens, des formulaires, et d'autres éléments interactifs. Cette fidélité s'étend aux pages complexes qui incluent des paragraphes, des listes, des images, des hyperliens, et du script côté client.

Ce PDF a été généré à partir de l'exemple de fichier HTML ci-dessus. Comparez son apparence avec l'image précédente - IronPDF préserve la mise en page avec une grande fidélité.

IronPDF gère des pages qui vont bien au-delà du simple balisage. L'exemple suivant convertit une page riche en fonctionnalités qui source de nombreux fichiers CSS externes, images, et ressources de script :

: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 cela a l'air bien dans Google Chrome, cela aura l'air bien une fois converti en PDF. Cela inclut les conceptions de page riches en CSS et rendues par JavaScript.

Comment créer un PDF à partir d'une URL ?

PdfDocument.fromUrl récupère et rend une page web en direct sous forme de PDF. Passez n'importe quelle URL accessible au public en tant qu'argument. Le moteur de rendu Chrome d'IronPDF récupère la page, charge tous les actifs, et produit un PDF parfait au pixel près - aucun téléchargement manuel de HTML requis.

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

L'article Wikipedia sur le format PDF, tel qu'il apparaît dans un navigateur web conforme aux standards.

Le PDF généré en appelant PdfDocument.fromUrl sur un article de Wikipedia. Notez sa grande ressemblance avec la page Web originale.**

Comment créer un PDF à partir d'une archive Zip ?

PdfDocument.fromZip convertit un fichier HTML spécifique contenu dans une archive ZIP en PDF. C'est particulièrement utile lors de la distribution de projets HTML autonomes qui regroupent leur HTML, CSS, et ressources d'image ensemble.

Pour cet exemple, supposons que le répertoire du projet contient un fichier ZIP avec la structure suivante :

//:path=/static-assets/ironpdf-nodejs/content-code-examples/tutorials/html-to-pdf/zip-structure.txt
html-zip.zip
├─ index.html
├─ style.css
├─ logo.png

Le fichier index.html contient :

//: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 pour 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 pour Node.js">
    </a>
  </body>
</html>

Et style.css déclare la mise en page et les règles de police :

//: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;
}

L'image d'échantillon à l'intérieur du fichier HTML ZIP hypothétique.

Lors de l'appel de fromZip, spécifiez le chemin vers le fichier ZIP en tant que premier argument et un objet de configuration comme second. Définissez la propriété mainHtmlFile sur le nom du fichier HTML à l'intérieur de l'archive qui doit être converti :

: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");
});

Création de PDF en utilisant PdfDocument.fromZip. La fonction rend avec succès le code HTML du fichier ZIP ainsi que ses ressources groupées.**

Ma bibliothèque préférée de ce genre est IronPDF. Elle permet une manipulation rapide et efficace des fichiers PDF. Elle dispose également de nombreuses fonctionnalités précieuses, comme l'exportation au format PDF/A et la signature numérique des documents PDF.

Milan Jovanovic

Microsoft MVP

Voir l'étude de cas

IronOCR signifie que nous pouvons économiser 40 000 $ par an grâce au traitement manuel, tout en améliorant la productivité et en libérant des ressources pour des tâches à fort impact. Je le recommande vivement.

Brent Matzelle

Directeur technique, OPYN

Voir l'étude de cas

Iron Suite joue un rôle crucial dans nos opérations. Ce sont des outils qui augmentent l'efficacité de l'entreprise, y compris la création de plans d'étage et l'amélioration de la gestion des stocks.

David Jones

Ingénieur logiciel principal, Agorus Build

Voir l'étude de cas

Comment ajouter des en-têtes et des pieds de page ?

Les propriétés textHeader et textFooter fixent un contenu personnalisé basé sur le texte à chaque page d'un PDF nouvellement rendu. L'exemple suivant crée un PDF à partir de la page d'accueil de la recherche Google avec un en-tête et un pied de page personnalisés, chacun utilisant une police différente :

: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 généré à partir de la page d'accueil de Google avec un en-tête et un pied de page personnalisés appliqués en utilisant textHeader et textFooter.

Pour des mises en page d'en-têtes et de pieds de page plus riches, utilisez plutôt les propriétés htmlHeader et htmlFooter. Celles-ci acceptent des fragments HTML bruts, offrant un contrôle total sur la typographie, les images et l'alignement. L'exemple ci-dessous centre l'URL de la page en gras dans l'en-tête et intègre une image de logo dans le pied de page :

: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 prend en charge les en-têtes et pieds de page basés sur HTML, offrant un contrôle total sur l'image de marque et la mise en page de chaque page.

Comment contrôlez-vous la taille de la page, l'orientation et les marges ?

Les propriétés margin, paperSize, fitToPaperMode, paperOrientation et grayScale sur ChromePdfRenderOptions contrôlent la mise en page physique de chaque page rendue. L'exemple suivant convertit la page d'accueil de Google avec des marges personnalisées, une orientation paysage A5 et une sortie en niveaux de gris :

: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");
});

L'énumération PaperSize inclut des tailles de papier standard telles que A4, A5, Letter et Legal. L'énumération PdfPaperOrientation supporte Portrait et Landscape. Ces paramètres offrent un contrôle précis des dimensions de sortie pour les documents prêts à imprimer.

Comment gérer les pages Web dynamiques ?

Les pages qui chargent du contenu de manière asynchrone — via des minuteries JavaScript, un chargement différé ou des appels d'API — peuvent ne pas être entièrement rendues au moment où le moteur de IronPDF les capture. Le mécanisme WaitFor, configuré via la propriété waitFor sur ChromePdfRenderOptions, instruit le moteur de rendu Chrome de faire une pause jusqu'à ce que les conditions spécifiées soient remplies avant de capturer la page.

Le bloc de code suivant configure IronPDF pour attendre 20 secondes avant de capturer le contenu de la page :

: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");
});

Alternativement, configurez IronPDF pour attendre qu'un élément DOM spécifique apparaisse avant de rendre. C'est utile pour les pages où le contenu est injecté après qu'un framework JavaScript ait terminé son montage :

: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 stratégie WaitForType.HtmlElement utilise un sélecteur de requête CSS standard. Le moteur de rendu sonde la présence de l'élément jusqu'à ce que maxWaitTime millisecondes soient écoulées ou que l'élément soit trouvé — le premier cas échu.