1. IronPDF
  2. Tutoriels
  3. HTML en PDF Node.js
Convertir HTML en PDF dans Node.js

HTML to PDF NodeJS

Darrius Serrant
Darrius Serrant
Mis à jour:
This article was translated from English: Does it need improvement?
Translated
View the article in English

La capacité de créer des PDF haute fidélité à partir de HTML brut, CSS et JavaScript est la fonctionnalité la plus puissante et la plus populaire de IronPDF. Ce tutoriel est une initiation complète pour aider les développeurs Node à tirer parti de IronPDF pour incorporer la génération de HTML en PDF dans leurs propres projets.

IronPDF est une bibliothèque API de haut niveau qui aide les développeurs à implémenter des capacités de traitement de PDF puissantes et robustes dans les applications logicielles rapidement et facilement. IronPDF est disponible dans plusieurs langages de programmation. For detailed coverage on how to create PDFs in .NET, Java, and Python, consult the official doc pages. Ce tutoriel couvre son utilisation telle qu'elle s'applique aux projets Node.js.

class="hsg-featured-snippet">

Comment convertir HTML en PDF dans Node.js

  1. Installez la bibliothèque HTML en PDF Node via NPM : npm install @ironsoftware/ironpdf.
  2. Importez la classe PdfDocument du package @ironsoftware/ironpdf.
  3. Convertissez à partir d'une chaîne HTML, d'un fichier ou d'une URL web.
  4. (optionnel) Ajoutez des en-têtes & pieds de page, modifiez la taille de la page, l'orientation et la couleur.
  5. Appelez PdfDocument.saveAs pour enregistrer le PDF généré.

Démarrage

Commencez à utiliser IronPDF dans votre projet aujourd'hui avec un essai gratuit.

Première étape :
green arrow pointer

Installer la bibliothèque IronPDF pour Node.js

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

npm install @ironsoftware/ironpdf
npm install @ironsoftware/ironpdf
SHELL

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

Installer le moteur IronPDF manuellement (optionnel)

IronPDF pour Node.js nécessite actuellement un binaire du moteur IronPDF pour fonctionner correctement.

Installez le binaire du moteur IronPDF en installant le package approprié pour votre système d'exploitation :

Veuillez noterL'installation du moteur IronPDF est optionnelle, car @ironpdf téléchargera et installera automatiquement le binaire approprié pour votre navigateur et système d'exploitation depuis NPM lors de sa première exécution.) Cependant, installer explicitement ce binaire sera vital dans des situations où l'accès à Internet est limité, réduit ou non souhaité.

Appliquer une clé de licence (optionnel)

Par défaut, IronPDF marquera tous les documents qu'il génère ou modifie avec un filigrane de fond titré.

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

Pour utiliser IronPDF sans le filigrane ajouté, vous devez définir la propriété licenseKey sur l'objet global IronPdfGlobalConfig avec une clé de licence valide. Le code source pour réaliser cela est donné ci-dessous :

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

Purchase a license key from our licensing page, or contact us to obtenir une clé de licence d'essai gratuite.

Veuillez noterLa clé de licence et d'autres paramètres de configuration globaux, doivent être définis avant d'utiliser d'autres fonctions de la bibliothèque pour garantir la meilleure performance et la fonctionnalité correcte.

Les sections suivantes de ce tutoriel supposeront que nous avons une clé de licence et que nous l'avons définie dans un fichier JavaScript séparé appelé config.js. Nous importons ce script partout où nous utiliserons la fonctionnalité 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
// ...
JAVASCRIPT

Convertir HTML en PDF

La version Node de la bibliothèque IronPDF fournit trois approches pour créer des fichiers PDF à partir de contenu HTML :

  1. À partir d'une chaîne de code HTML
  2. À partir d'un fichier HTML local
  3. À partir d'un site web en ligne

Cette section expliquera en détail les trois méthodes.

Créer un fichier PDF à partir d'une chaîne HTML

PdfDocument.fromHtml est une méthode qui vous permet de générer des PDF à partir de chaînes de balisage de pages web brutes.

Cette méthode offre le plus de flexibilité parmi les trois approches. C'est parce que les données dans la chaîne HTML peuvent provenir de pratiquement n'importe où : fichiers texte, flux de données, un modèle HTML, données HTML générées, etc.

L'exemple de code ci-dessous démontre comment utiliser la méthode PdfDocument.fromHtml en pratique :

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

Comme montré ci-dessus, nous appelons la méthode PdfDocument.fromHtml avec une chaîne de texte contenant le code de balisage pour un élément de titre de niveau un.

PdfDocument.fromHtml renvoie une Promesse qui se résout en une instance de la classe PdfDocument. Un PdfDocument représente un fichier PDF que la bibliothèque a produit à partir de contenu source. Cette classe forme la pierre angulaire de la plupart des fonctionnalités principales de IronPDF, conduisant des cas d'utilisation significatifs de création et d'édition de PDF.

Enfin, nous utilisons la méthode saveAs sur le PdfDocument pour sauvegarder le fichier sur le disque. Le fichier PDF enregistré est montré ci-dessous.

Figure 2 The PDF generated from the HTML string "<h1>Hello from IronPDF!</h1>". Les fichiers PDF que PdfDocument.fromHtml génère apparaissent exactement comme le contenu de la page web apparaîtrait.

Créer un fichier PDF à partir d'un fichier HTML

PdfDocument.fromHtml ne fonctionne pas seulement avec des chaînes HTML. La méthode accepte également un chemin vers un document HTML local.

Dans notre prochain exemple, nous travaillerons avec cette page web d'exemple.

Figure 3 Notre page HTML d'exemple telle qu'elle apparaît dans Google Chrome. Téléchargez cette page et d'autres similaires depuis le site de File Samples : https://filesamples.com/samples/code/html/sample2.html

Les lignes de code suivantes convertissent le document d'exemple entier en PDF. Au lieu d'une chaîne HTML, nous appelons PdfDocument.fromHtml avec un chemin de fichier valide vers notre fichier d'exemple :

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

Nous avons inclus ci-dessous le contenu du PDF résultant. Remarquez que IronPDF non seulement conserve l'apparence du document HTML original, mais il préserve également la fonctionnalité des liens, des formulaires et d'autres éléments interactifs courants.

Figure 4 Ce PDF a été généré à partir de l'exemple de code précédent. Comparez son apparence avec l'image précédente, et notez la ressemblance remarquable !

Si vous avez examiné le code source de la page d'exemple, vous remarquerez qu'il est plus complexe. Il utilise plus de types d'éléments HTML (paragraphes, listes non ordonnées, sauts de ligne, règles horizontales, hyperliens, images, etc.) et inclut également une certaine quantité de script (utilisé pour définir des cookies).

IronPDF est capable de rendre du contenu web qui est bien plus complexe que ce que nous avons utilisé jusqu'à présent. Pour démontrer cela, considérons la page suivante :

Figure 5 Un article écrit sur Puppeteer, une bibliothèque Node popularisée pour sa capacité à contrôler Chrome par programmation en utilisant une instance de navigateur sans tête

La page décrite ci-dessus est celle d'un article écrit sur la bibliothèque Node Puppeteer. Puppeteer exécute des sessions de navigation sans tête que les développeurs Node utilisent pour automatiser de nombreuses tâches de navigateur côté serveur ou côté client (l'une d'elles inclut la génération de PDF HTML côté serveur).

La nouvelle page source de nombreux actifs (fichiers CSS, images, fichiers de script, etc.) et utilise une mise en page encore plus complexe. Pour cet exemple suivant, nous allons convertir une copie enregistrée de cette page (avec ses actifs source) en un PDF fidèle à l'image.

Le fragment de code ci-dessous suppose que la page est enregistrée dans le même répertoire que notre projet sous le nom "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");
});
JAVASCRIPT

L'image suivante montre les résultats du fragment de code ci-dessus.

Figure 6 Si elle est bien rendue dans Google Chrome, elle le sera également lors de la conversion en PDF. Cela comprend les conceptions de pages lourdes en CSS et JavaScript.

Créer un fichier PDF à partir d'une URL

IronPDF peut convertir des chaînes HTML et des fichiers HTML de n'importe quelle taille et complexité. Cependant, vous n'êtes pas limité à n'utiliser que du balisage brut issu de chaînes et de fichiers. IronPDF peut également demander du HTML depuis une URL.

Considérons l'article Wikipedia situé à l'adresse https://en.wikipedia.org/wiki/PDF.

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

Utilisez ce code source pour convertir cet article Wikipedia en 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");
JAVASCRIPT

Ci-dessus, nous utilisons PdfDocument.fromUrl pour convertir la page web en PDF en quelques lignes de code. IronPDF récupèrera pour vous le code HTML de l'adresse web et l'affichera de manière harmonieuse. Aucun fichier HTML ou chaîne de texte nécessaire !

Figure 8 Le PDF généré en appelant PdfDocument.fromUrl sur un article Wikipedia. Notez ses similitudes avec la page web originale.

Créer un fichier PDF à partir d'une archive Zip

Utilisez PdfDocument.fromZip pour convertir un fichier HTML spécifique situé dans un fichier compressé (zip) en PDF.

Par exemple, supposons que nous ayons un fichier Zip dans le répertoire du projet avec la structure interne suivante :

html-zip.zip
├─ index.html
├─ style.css
├─ logo.png

Le fichier index.html contient le code :

<!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>
HTML

style.css déclare cinq règles 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;
}

Enfin, logo.png représente notre logo de produit :

Figure 9 L'image d'exemple à l'intérieur d'un fichier zip HTML hypothétique.

Lors de l'appel de la méthode fromZip, spécifiez un chemin valide vers le zip dans le premier argument, avec un objet JSON qui définit la propriété mainHtmlFile avec le nom du fichier HTML du zip que nous voulons convertir.

Nous convertissons le fichier index.html à l'intérieur du dossier zip de la même manière :

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

Figure 10 Création de PDF à l'aide de la fonction PdfDocument.fromZip. Cette fonction rend avec succès le code HTML contenu dans le fichier ZIP, avec ses actifs contenus.

Options avancées de génération de HTML en PDF

L'interface ChromePdfRenderOptions permet aux développeurs Node de modifier le comportement de rendu HTML de la bibliothèque. Les propriétés exposées permettent une personnalisation granulaire de l'apparence des PDF avant le rendu PDF. De plus, elles permettent de gérer des cas particuliers de conversion HTML-PDF.

IronPDF rend de nouveaux PDF initialement en utilisant certaines valeurs par défaut de ChromePdfRenderOptions. Vous pouvez interroger vous-même ces valeurs préréglées en appelant la fonction defaultChromePdfRenderOptions :

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

// Retrieve a ChromePdfRenderOptions object with default settings.
var options = defaultChromePdfRenderOptions();
import { defaultChromePdfRenderOptions } from "@ironsoftware/ironpdf";

// Retrieve a ChromePdfRenderOptions object with default settings.
var options = defaultChromePdfRenderOptions();
JAVASCRIPT

Cette section passera en revue les cas d'utilisation les plus populaires de rendu de HTML en PDF qui nécessitent l'utilisation de l'interface ChromePdfRenderOptions.

Chaque sous-section commencera par les valeurs préréglées et les modifiera au besoin pour atteindre le résultat cible.

Personnaliser la sortie de génération de PDF

Ajouter des en-têtes et des pieds de page personnalisés

Avec les propriétés textHeader et textFooter, vous pouvez ajouter du contenu d'en-tête et/ou de pied de page personnalisé aux nouveaux PDF rendus.

L'exemple ci-dessous crée une version PDF de la page d'accueil de recherche Google avec un en-tête et un pied de page personnalisés faits de contenu textuel. Nous utilisons des lignes de séparation pour séparer ce contenu du corps de la page. Nous utilisons également des polices distinctes dans l'en-tête et le pied de page pour rendre les distinctions plus claires.

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

Le code source produit ce PDF :

Figure 11 Une nouvelle page a été créée au format PDF, générée à partir de la page d'accueil de Google. Notez l'inclusion d'en-têtes et de pieds de page supplémentaires.

Pour encore plus de contrôle sur la mise en page, le positionnement et le contenu inclus dans l'en-tête et le pied de page, vous pouvez aussi les définir en utilisant du HTML brut à la place du texte.

Dans le bloc de code suivant, nous utilisons du HTML pour incorporer un contenu plus riche dans l'en-tête et le pied de page. Dans l'en-tête, nous mettons en gras et centrons l'URL de la page ; dans le pied de page, nous intégrons et centrons un logo.

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

L'image ci-dessous montre le résultat de ces changements.

Figure 12 IronPDF pour Node.js peut appliquer des personnalisations à vos pages HTML lors de la conversion en PDFs.

Définir les marges, les tailles de page, l'orientation de la page et la couleur

IronPDF prend en charge des paramètres supplémentaires pour définir des marges de page personnalisées, des tailles de page et des orientations de page pour les PDF fraîchement convertis.

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

Dans le bloc de code ci-dessus, nous configurons IronPDF pour générer notre PDF de la page d'accueil de Google en niveaux de gris en utilisant une orientation paysage et avec au moins 50 millimètres d'espace de marge. Nous le configurons également pour ajuster le contenu au format papier A5.

Générer des PDF à partir de pages web dynamiques

Pour les pages web contenant du contenu qui n'est pas immédiatement disponible et rendu lors du chargement, il peut être nécessaire de suspendre le rendu du contenu de cette page jusqu'à ce que certaines conditions soient remplies.

Par exemple, le développeur peut vouloir générer un PDF contenant du contenu qui n'apparaît que 15 secondes après le chargement de la page. Dans un autre cas, ce même contenu peut n'apparaître qu'une fois qu'un code complexe côté client est exécuté.

Pour gérer ces deux cas particuliers (et bien d'autres), la version Node de IronPDF définit le mécanisme WaitFor. Les développeurs peuvent inclure cette propriété dans leurs paramètres ChromePdfRenderOptions pour instruire le moteur de rendu Chrome de IronPDF de convertir le contenu d'une page lorsque certains événements se produisent.

Le groupe de code suivant configure IronPDF pour attendre 20 secondes avant de capturer le contenu de notre page d'accueil en 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");
});
JAVASCRIPT

Le bloc de code suivant configure IronPDF pour attendre jusqu'à ce qu'un élément sur un éditeur de texte SEO populaire puisse être sélectionné avec succès.

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

Générer des PDF à partir d'un modèle HTML

Dans la section finale de ce tutoriel, nous appliquerons toutes les connaissances introduites dans les sections précédentes pour accomplir une automatisation très pratique : générer un ou plusieurs PDFs à partir d'un modèle HTML.

Le modèle que nous utiliserons pour cette section est indiqué ci-dessous. Il a été adapté de ce modèle de facture accessible au public pour inclure des balises de remplacement (par ex. {NOM-SOCIÉTÉ}, {NOM-COMPLET}, {NUMÉRO-FACTURE}, etc.) pour le contenu remplaçable.

Figure 13 Un modèle de facture d'exemple. Nous écrirons un code JavaScript supplémentaire qui ajoutera des données dynamiques à ce modèle avant de le générer en PDFs.

Dans le prochain bloc de code source, nous chargerons le modèle HTML dans un nouvel objet PdfDocument, remplacerons les balises de remplacement que nous avons définies par quelques données de test factices, puis enregistrerons l'objet PdfDocument dans le système de fichiers.

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

/**
 * 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);
}

// Path to the template file
const template = "./sample-invoice.html";

// Load the template, replace placeholders, and save the PDF
getTemplateHtml(template).then(async (doc) => {
    // Replace placeholders with real data
    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"));
import { PdfDocument } from "@ironsoftware/ironpdf";
import './config.js'; // Import the configuration script

/**
 * 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);
}

// Path to the template file
const template = "./sample-invoice.html";

// Load the template, replace placeholders, and save the PDF
getTemplateHtml(template).then(async (doc) => {
    // Replace placeholders with real data
    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"));
JAVASCRIPT

Le code source ci-dessus définit trois fonctions d'assistance asynchrones :

  • getTemplateHtml : utilise la méthode PdfDocument.fromHtml pour charger un modèle HTML dans un nouvel objet PdfDocument.
  • addTemplateData : utilise la méthode PdfDocument.replaceText pour substituer une balise fournie (appelée une clé), avec sa valeur de données de remplacement.
  • generatePdf : enregistre un PdfDocument à un emplacement de fichier donné.

De plus, nous déclarons une variable const template pour contenir l'emplacement de notre fichier modèle HTML. Le PDF généré à partir du code source ci-dessus est montré ci-dessous.

Figure 14 Le nouveau document PDF créé à partir de la substitution de balises définies dans un modèle HTML avec des données réelles. Ce document conserve les styles CSS et la mise en page que nous attendrions si aucune de ces remplacements n'avaient jamais eu lieu.

Lecture supplémentaire

Ce tutoriel n'a fait qu'effleurer la surface de ce qui est possible avec les fonctions API de haut niveau d'IronPDF. Envisagez d'étudier ces sujets connexes pour approfondir vos connaissances et votre compréhension.

  1. La classe PdfGenerator : c'est une classe utilitaire dédiée à la création d'objets PdfDocument à partir de HTML, URLs, archives Zip, et d'autres médias source. Cette classe offre une alternative viable à l'utilisation des fonctions de rendu PDF définies sur la classe PdfDocument.
  2. HttpLoginCredentials : si vous avez besoin de générer des PDFs à partir de pages web nécessitant des cookies spécifiques ou protégées par mot de passe, alors cette référence s'avérera extrêmement utile.

Questions Fréquemment Posées

Comment puis-je convertir HTML en PDF dans Node.js sans perdre le formatage?

Dans Node.js, vous pouvez utiliser IronPDF pour convertir HTML en PDF sans perdre le formatage en employant des méthodes comme PdfDocument.fromHtml, qui prend en charge le rendu précis des chaînes HTML et fichiers au format PDF.

Quelles étapes sont impliquées dans l'installation d'IronPDF pour Node.js?

Pour installer IronPDF dans un projet Node.js, exécutez la commande npm install @ironsoftware/ironpdf. Cela ajoutera le package IronPDF aux dépendances de votre projet, vous permettant d'utiliser ses capacités de traitement PDF.

Comment puis-je générer un PDF à partir d'une URL web dans Node.js?

Vous pouvez utiliser la méthode PdfDocument.fromUrl dans IronPDF pour convertir directement une page web en PDF en fournissant l'URL de la page. Cette méthode récupère le contenu et le rend au format PDF.

Quelles sont les options pour personnaliser la sortie PDF dans IronPDF?

IronPDF fournit l'interface ChromePdfRenderOptions, qui permet la personnalisation de la sortie PDF. Vous pouvez ajuster des paramètres tels que la taille de la page, l'orientation, les marges, et inclure du contenu dynamique via cette interface.

Comment puis-je ajouter des en-têtes et pieds de page à mes documents PDF en utilisant IronPDF?

Pour ajouter des en-têtes et pieds de page aux PDFs dans IronPDF, utilisez les propriétés textHeader et textFooter disponibles dans ChromePdfRenderOptions. Cela permet d'inclure du texte personnalisé en haut et en bas de chaque page.

Est-il possible de convertir des fichiers HTML dans une archive ZIP en PDFs en utilisant Node.js?

Oui, IronPDF prend en charge la conversion de fichiers HTML dans une archive ZIP en PDFs en utilisant la méthode PdfDocument.fromZip, permettant le traitement par lots de plusieurs fichiers HTML.

Comment puis-je supprimer les filigranes des PDFs générés avec IronPDF?

Pour supprimer les filigranes des PDFs créés avec IronPDF, vous devez appliquer une clé de licence valide dans votre application. Cela peut être fait en utilisant la méthode IronPdf.License.LicenseKey.

Comment gérer le contenu web asynchrone lors de la conversion en PDF?

IronPDF fournit le mécanisme WaitFor pour gérer le contenu asynchrone, en s'assurant que tous les éléments dynamiques sont entièrement chargés avant le début du processus de rendu PDF.

IronPDF peut-il convertir des pages web protégées par mot de passe en PDFs?

Oui, en utilisant HttpLoginCredentials dans ChromePdfRenderOptions, vous pouvez entrer les identifiants nécessaires pour accéder et convertir des pages web protégées par mot de passe en PDFs.

Que dois-je faire si ma conversion HTML en PDF ne conserve pas la mise en page correcte?

Assurez-vous d'utiliser les ChromePdfRenderOptions appropriés pour correspondre aux exigences de mise en page. Ajuster les paramètres tels que la taille de la page, l'orientation et les marges peut aider à maintenir la mise en page souhaitée dans le PDF converti.

IronPDF prend-il entièrement en charge la conversion HTML vers PDF sous .NET 10 ?

Oui, IronPDF prend en charge .NET 10 pour la conversion HTML vers PDF grâce à des classes comme ChromePdfRenderer , notamment les méthodes RenderHtmlAsPdf , RenderHtmlFileAsPdf et RenderUrlAsPdf , avec la prise en charge de CSS3, JavaScript, des images et des ressources externes. Ceci est explicitement confirmé dans la documentation d'IronPDF relative aux fonctionnalités de la bibliothèque PDF .NET.

Darrius Serrant
Darrius Serrant
  Discutez maintenant avec l'équipe d'ingénierie
Ingénieur logiciel Full Stack (WebOps)

Darrius Serrant est titulaire d'un baccalauréat en informatique de l'université de Miami et travaille comme ingénieur marketing WebOps Full Stack chez Iron Software. Attiré par le codage dès son plus jeune âge, il a vu l'informatique comme à la fois mystérieuse et accessible, en faisant le ...

Lire la suite
Prêt à commencer?
Version : 2025.11 vient de sortir