HTML à PDF NodeJS

Installer avec npm

  npm i @ironsoftware/ironpdf

https://www.npmjs.com/package/@ironsoftware/ironpdf

Installer la bibliothèque IronPDF pour Node.js

Installez le paquetage IronPDF for Node.js en exécutant la commande NPM ci-dessous dans le projet Node que vous avez choisi :

npm install @ironsoftware/ironpdf

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

Installer manuellement le moteur IronPDF (optionnel)

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

Installez le binaire IronPDF Engine en l'installation du paquet approprié pour votre système d'exploitation :

[{i :(L'installation du moteur IronPDF est optionnelle, car @ironpdf téléchargera et installera automatiquement le binaire approprié pour votre navigateur et votre système d'exploitation à partir de NPM lors de sa première exécution. L'installation explicite de ce binaire sera toutefois vitale dans les situations où l'accès à l'internet est limité, réduit ou indésirable.)}]

Appliquer une clé de licence (facultatif)

Par défaut, IronPDF marquera tous les documents qu'il génère ou modifie d'un filigrane d'arrière-plan titré.

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

Pour utiliser IronPDF sans l'ajout du filigrane, vous devez définir la propriété licenseKey de l'objet global IronPdfGlobalconfig avec une clé de licence valide. Le code source permettant de réaliser cette opération est donné ci-dessous :

import {IronPdfGlobalConfig} from "@ironsoftware/ironpdf";
var config = IronPdfGlobalConfig.getConfig();
config.licenseKey = "{YOUR-LICENSE-KEY-HERE}";

import {IronPdfGlobalConfig} from "@ironsoftware/ironpdf";
var config = IronPdfGlobalConfig.getConfig();
config.licenseKey = "{YOUR-LICENSE-KEY-HERE}";

Acheter une clé de licence à partir de notre page sur les licences, ou contactez-nous pour obtenir une clé de licence d'essai gratuite.

[{i :(La clé de licence et les autres paramètres de configuration globaledoit être réglée avant d'utiliser les autres fonctions de la bibliothèque afin de garantir des performances optimales et un fonctionnement correct.)}]

Les sections suivantes de ce tutoriel supposent que nous disposons d'une clé de licence et que nous l'avons définie dans un fichier JavaScript distinct appelé config.js. Nous importons ce script partout où nous utiliserons les fonctionnalités d'IronPDF :

import {PdfDocument} from "@ironsoftware/ironpdf";
import('./config.js');
// ...

import {PdfDocument} from "@ironsoftware/ironpdf";
import('./config.js');
// ...

Convertir HTML en PDF

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

1. A partir d'une chaîne de code HTML
2. À partir d'un fichier HTML local

3. Extrait d'un site web en ligne

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

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 balises de pages web brutes.

Cette méthode offre la plus grande flexibilité des trois approches. En effet, les données de la chaîne HTML peuvent provenir de pratiquement n'importe où : fichiers texte, flux de données, modèle HTML, données HTML générées, etc.

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

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

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

Comme indiqué ci-dessus, nous appelons la méthode PdfDocument.fromHtml avec une chaîne de texte contenant le code de balisage d'un élément headline de niveau 1.

PdfDocument.fromHtml renvoie une promesse qui se résout en une instance de l'élément PdfDocument classe. Un PdfDocument représente un fichier PDF que la bibliothèque a produit à partir d'un contenu source. Cette classe constitue la pierre angulaire de la plupart des fonctionnalités de base d'IronPDF et permet d'importants cas d'utilisation en matière de création et d'édition de PDF.

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

**Le PDF généré à partir de la chaîne HTML "<h1>Bonjour d'IronPDF!</h1>". Les fichiers PDF générés par PdfDocument.fromHtml apparaissent comme le contenu d'une page web

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

PdfDocument.fromHtml ne fonctionne pas seulement avec les chaînes HTML. La méthode accepte également un chemin d'accès à un document HTML local.

Dans notre prochain exemple, nous travaillerons avec ceci exemple de page web.

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

Les lignes de code suivantes convertissent l'ensemble du document d'exemple en PDF. Au lieu d'une chaîne HTML, nous appelons PdfDocument.fromHtml avec un chemin d'accès valide à notre fichier d'exemple :

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

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

Nous avons inclus le contenu du PDF résultant ci-dessous. Vous remarquerez qu'IronPDF préserve non seulement l'apparence du document HTML d'origine, mais aussi la fonctionnalité des liens, des formulaires et d'autres éléments interactifs courants.

Ce PDF a été généré à partir de l'exemple de code précédent. Comparez son aspect 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, liens hypertextes, images, etc.) et comprend également un certain nombre de scripts (utilisé pour la mise en place de cookies).

IronPDF est capable de restituer des contenus web beaucoup plus complexes que ceux que nous avons utilisés jusqu'à présent. Pour le démontrer, considérons la page suivante :

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

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

La nouvelle page contient de nombreuses sources d'information (Fichiers CSS, images, fichiers de script, etc.) et utilise un schéma encore plus complexe. Pour l'exemple suivant, nous allons convertir une copie sauvegardée de cette page (ainsi que son patrimoine d'origine) en un PDF parfait au pixel près.

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

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

L'image suivante montre les résultats de l'extrait de code ci-dessus.

Si le résultat est satisfaisant dans Google Chrome, il le sera également lorsqu'il sera converti en PDF. Il s'agit notamment de conceptions de pages à forte composante CSS et JavaScript

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

IronPDF peut convertir des chaînes HTML et des fichiers HTML de toute taille et de toute complexité. Vous n'êtes toutefois pas limité à l'utilisation de balises brutes provenant de chaînes et de fichiers. IronPDF peut également demander du HTML à partir d'une URL.

Consultez l'article de Wikipédia à l'adresse suivante https://en.wikipedia.org/wiki/PDF.

**L'article de Wikipédia sur le format PDF, tel qu'il apparaît dans un navigateur web conforme aux normes

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

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

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

Le PDF généré en appelant PdfDocument.fromUrl sur un article de Wikipedia. Notez les 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é (fermeture éclair) 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>

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 le logo de notre produit :

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

Lorsque vous appelez la méthode fromZip, spécifiez un chemin valide vers le fichier zip dans le premier argument, ainsi qu'un objet JSON qui définit la propriété mainHtmlFile avec le nom du fichier HTML du fichier 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');
// Render the HTML string
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');
// Render the HTML string
PdfDocument.fromZip("./html-zip.zip", {
    mainHtmlFile: "index.html"
}).then(async (pdf) => {
    return await pdf.saveAs("html-zip-to-pdf.pdf");
});

**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 les actifs qu'il contient

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

Les ChromePdfRenderOptions (options de rendu) permet aux développeurs Node de modifier le comportement de la bibliothèque en matière de rendu HTML. Les propriétés exposées ici permettent une personnalisation granulaire de l'apparence des PDF avant leur rendu. En outre, ils permettent de traiter des cas particuliers de conversion HTML-PDF.

IronPDF rend les nouveaux PDF en utilisant initialement certaines valeurs par défaut de ChromePdfRenderOptions. Vous pouvez interroger ces valeurs prédéfinies en appelant la fonction defaultChromePdfRenderOptions :

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

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

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

Chaque sous-section commencera par les valeurs prédéfinies et les modifiera si nécessaire pour atteindre le résultat visé.

Personnaliser la sortie de la génération PDF

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

Les propriétés textHeader et textFooter vous permettent d'apposer un contenu d'en-tête et/ou de pied de page personnalisé aux PDF nouvellement rendus.

L'exemple ci-dessous crée une version PDF de la page d'accueil du moteur de recherche Google avec un en-tête et un pied de page personnalisés constitués 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 de caractères différentes dans l'en-tête et le pied de page afin de rendre les distinctions plus claires.

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

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

Le code source produit ce PDF :

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 mieux contrôler la disposition, le positionnement et le contenu de l'en-tête et du pied de page, vous pouvez également les définir en utilisant du HTML brut à la place du texte.

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

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

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

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

IronPDF for Node.js peut appliquer des personnalisations à vos pages HTML tout en les convertissant en PDF.

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 permettant de définir des marges, des tailles et des orientations de page personnalisées pour les PDF fraîchement convertis.

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

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

Dans le bloc de code ci-dessus, nous configurons IronPDF pour qu'il génère notre page d'accueil Google PDF en niveaux de gris, en orientation paysage et avec un espace de marge d'au moins 50 millimètres. Nous l'avons également adapté au format de papier A5.

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

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

Par exemple, le développeur peut vouloir générer un PDF contenant un 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'après l'exécution d'un code complexe côté client.

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

Le bloc de code suivant permet à IronPDF d'attendre 20 secondes avant de capturer le contenu de notre page d'accueil au format 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");
});

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

Le bloc de code suivant configure IronPDF de manière à ce qu'il attende qu'un élément d'un site populaire de Editeur de texte SEO peut être sélectionné avec succès.

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

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

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

Dans la dernière section de ce tutoriel, nous allons appliquer toutes les connaissances introduites dans les sections précédentes pour réaliser une automatisation très pratique : générer un ou plusieurs PDF à partir d'un modèle HTML.

Le modèle que nous utiliserons pour cette section est présenté ci-dessous. Il a été adapté à partir de ce document accessible au public facture pour inclure des balises de remplacement (par exemple {NOM DE L'ENTREPRISE}, {NOM COMPLET}, {NUMÉRO DE LA FACTURE}, etc.) pour le contenu remplaçable.

Un modèle de facture. Nous allons écrire un code JavaScript supplémentaire qui ajoutera des données dynamiques à ce modèle avant de le générer en PDF

Avant de poursuivre, vous pouvez télécharger ce modèle HTML et l'examiner dans votre IDE préféré.

Dans le prochain bloc de code source, nous chargerons le modèle HTML dans un nouvel objet PdfDocument, nous remplacerons les espaces réservés que nous avons définis par des données de test fictives, puis nous enregistrerons l'objet PdfDocument dans le système de fichiers.

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

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

La source ci-dessus définit trois fonctions d'aide 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 remplacer un placeholder fourni (appelé "clé")avec sa valeur de remplacement.

• generatePdf : enregistre un PdfDocument à un emplacement de fichier donné.

  En outre, nous déclarons une variable const template qui contient l'emplacement de notre fichier de modèle HTML. Le PDF généré à partir du code source ci-dessus est illustré ci-dessous.

  Le nouveau document PDF créé en remplaçant les espaces réservés définis dans un modèle HTML par des données réelles. Ce document conserve les styles CSS et la mise en page que nous attendrions si de tels remplacements n'avaient jamais eu lieu

Pour en savoir plus

Ce tutoriel n'a fait qu'effleurer les possibilités offertes par les fonctions de haut niveau de l'API d'IronPDF. Envisagez d'étudier ces sujets connexes pour approfondir vos connaissances et votre compréhension.

1. La classe PdfGenerator (générateur de fichiers PDF): il s'agit d'une classe utilitaire dédiée à la création d'objets PdfDocument à partir de HTML, d'URL, d'archives Zip et d'autres médias sources. Cette classe offre une alternative viable à l'utilisation des fonctions de rendu PDF définies dans la classe PdfDocument.
2. HttpLoginCredentials (informations d'identification) (informations d'identification)si vous avez besoin de générer des PDF à partir de pages web qui requièrent des cookies spécifiques ou qui sont protégées par un mot de passe, cette référence s'avérera extrêmement utile.