Générer de beaux PDF avec du code : quel outil choisir ?

Puppeteer, React-pdf et Typst permettent de générer des PDF avec une mise en page soignée. Pour choisir entre eux, partez du document à produire : un modèle HTML/CSS, une fiche construite dans une application React ou un long rapport n’imposent pas les mêmes contraintes. Pensez aussi à la personne qui devra modifier le modèle dans six mois.

Prenez un rapport envoyé après chaque intervention. Son titre, ses marges et son pied de page changent rarement. En revanche, le nom du client, les photos et la longueur du commentaire varient à chaque envoi. Automatiser ce document consiste à séparer la mise en page des données, puis à vérifier que les deux s’accordent même lorsque le contenu déborde de la première page.

Partir du document que vous envoyez vraiment

Avant de choisir une bibliothèque, rassemblez quelques exemples : un document court, le plus long que vous ayez envoyé, et celui qui vous a obligé à déplacer les blocs à la main. Ils donnent un meilleur cahier des charges qu’une maquette remplie de texte de démonstration.

Demandez-vous aussi qui fera les modifications. Si une équipe web doit changer régulièrement la présentation, le HTML/CSS lui sera familier. Si une personne prépare de longs rapports avec des tableaux et des notes, un outil pensé pour les documents peut lui rendre davantage service.

Puppeteer : utiliser le HTML et le CSS pour l’impression

Puppeteer pilote Chrome depuis Node.js. Sa méthode page.pdf() produit un PDF à partir de la page rendue. Vous pouvez donc écrire un modèle HTML, travailler sa feuille de style et lancer l’export depuis votre application. Le guide PDF de Puppeteer décrit ce fonctionnement.

C’est un bon point de départ pour une équipe qui sait déjà faire des pages web. Il faut toutefois penser en feuilles A4. Un bloc qui descend naturellement dans une page web peut se retrouver coupé en deux à l’impression.

Un premier export exécutable

Dans un projet Node.js, installez Puppeteer :

npm install puppeteer

Enregistrez ce fichier sous generer-pdf.mjs, puis lancez node generer-pdf.mjs. Il crée rapport.pdf dans le dossier courant.

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch();

try {
  const page = await browser.newPage();
  await page.setContent(`
    <!doctype html>
    <html lang="fr">
      <head>
        <meta charset="utf-8">
        <title>Rapport d'intervention</title>
        <style>
          @page { size: A4; margin: 20mm; }
          body { font: 11pt Arial, sans-serif; color: #18202d; }
          h1 { font-size: 25pt; color: #2459ad; }
          h2 { break-after: avoid; }
          .bilan { padding: 6mm; background: #eef4ff; }
        </style>
      </head>
      <body>
        <h1>Rapport d'intervention</h1>
        <p>Client : Atelier Martin</p>
        <h2>Bilan</h2>
        <div class="bilan">
          <p>Le formulaire de contact est opérationnel.</p>
          <p>Prochaine vérification prévue dans un mois.</p>
        </div>
      </body>
    </html>
  `, { waitUntil: 'load' });

  await page.pdf({
    path: 'rapport.pdf',
    printBackground: true,
    preferCSSPageSize: true,
  });
} finally {
  await browser.close();
}

printBackground conserve les fonds colorés. preferCSSPageSize donne la priorité au format défini par @page. Puppeteer attend aussi le chargement des polices par défaut avant l’export. Les options de génération permettent de régler ces comportements.

Cet exemple contient du texte fixe. Pour des données venant d’un formulaire, passez par un moteur de templates qui échappe les valeurs. Une saisie utilisateur collée telle quelle dans une chaîne HTML peut devenir du balisage ou du script.

Sur le serveur, vérifiez tôt que Chrome peut démarrer et que les polices sont installées. Si un graphique se dessine après le chargement de la page, attendez un signal de fin de rendu avant l’export. Sinon, le fichier peut être généré pendant que le graphique est encore vide.

React-pdf : un modèle de document en composants

Le paquet @react-pdf/renderer permet de décrire un PDF avec des composants comme Document, Page, View et Text. Vous retrouvez JSX et une organisation familière si vous travaillez déjà avec React. Vous écrivez toutefois un modèle propre au PDF, avec les styles pris en charge par React-pdf.

Un composant de votre interface qui rend des div, une grille CSS ou un tableau HTML ne devient donc pas automatiquement un document PDF. Il faut reprendre sa présentation avec les primitives du moteur. Cette séparation peut être utile : le document envoyé au client mérite souvent une présentation différente de l’écran utilisé pour le saisir.

React-pdf propose des contrôles de pagination, dont les ruptures explicites, les blocs à garder ensemble et les éléments répétés sur les pages. La documentation sur la pagination détaille notamment break, wrap et fixed.

Pour des fiches ou des rapports construits par une équipe React, cette option vaut un essai avec votre tableau le plus difficile. C’est plus instructif qu’une première page réussie avec quatre lignes.

Typst : quand le document a sa propre mise en page

Typst est un langage de composition de documents. Vous décrivez le contenu et ses règles de mise en forme dans un fichier texte, puis le compilateur produit le PDF. Sa syntaxe est différente du HTML ; elle permet notamment de régler la page et la typographie avec des règles set. Le tutoriel de mise en forme en donne les bases.

Voici un petit modèle à enregistrer dans rapport.typ :

#set page(paper: "a4", margin: 20mm)
#set text(size: 11pt, lang: "fr")
#show heading: set text(fill: rgb("2459ad"))

= Rapport d'intervention

Client : Atelier Martin

== Travaux réalisés

#table(
  columns: (1fr, auto),
  inset: 8pt,
  table.header([*Intervention*], [*Durée*]),
  [Réglage du formulaire], [2 h],
  [Vérification sur mobile], [1 h],
)

Avec le compilateur Typst installé, la commande typst compile rapport.typ rapport.pdf crée le fichier. Pour automatiser la production, le modèle peut charger des données JSON. Le guide d’automatisation de Typst montre comment relier des données à un modèle.

Typst convient bien à un rapport récurrent ou à un dossier dont la présentation doit rester cohérente sur plusieurs pages. Il faudra apprendre un langage supplémentaire et organiser ses modèles. Pour un simple export d’une page HTML existante, ce détour peut être inutile.

Ce qui fait la qualité du PDF au quotidien

Une police lisible, des marges régulières et une hiérarchie de titres claire font déjà une grande partie du travail. Les difficultés restantes viennent souvent des données : un nom d’entreprise sur trois lignes, une image verticale là où la maquette prévoyait un paysage, ou une dernière page qui ne contient que la signature.

Essayez le modèle avec ces variations. Vérifiez que le texte reste sélectionnable, que les liens fonctionnent et que les tableaux se lisent encore quand ils passent à la page suivante. Si un bloc peut dépasser une page entière, lui interdire toute coupure risque de créer un autre problème.

Pour une génération régulière, prévoyez aussi les échecs. Une image inaccessible ne devrait pas faire disparaître silencieusement un rapport. L’application doit pouvoir signaler le problème et relancer le travail. Au-delà de quelques exports ponctuels, une file de tâches aide à limiter le nombre de générations simultanées.

C’est à cet endroit que le modèle PDF rejoint votre organisation : les données arrivent d’un formulaire ou d’un CRM, le fichier est généré, puis une personne le vérifie ou l’envoie. Nous pouvons relier ces étapes dans un workflow d’automatisation. Pour commencer, un document réel et un exemple de ses données suffisent à discuter du bon outil.