Guide HTML vers PDF et générateur de CSS d'impression
Convertir du HTML en PDF : CSS d'impression, window.print() | We.Inc
Transformez du HTML en PDF propre : enregistrez depuis la boîte de dialogue d'impression, écrivez du CSS d'impression avec @page et break-inside, appelez window.print() ou faites le rendu sur un serveur. Avec un générateur de CSS d'impression.
Le moyen le plus rapide de transformer une page web en PDF est la boîte de dialogue d'impression du navigateur : ouvrez-la, choisissez la destination PDF et enregistrez. Pour contrôler l'apparence de ce PDF, ajoutez du CSS d'impression avec @media print et @page pour le format du papier et les marges. Pour des PDF générés automatiquement, faites le rendu de la page avec un navigateur headless comme Puppeteer ou Playwright.
Les façons de produire un PDF à partir de HTML
Méthode
S'exécute où
Texte sélectionnable
Idéal pour
Boîte d'impression, enregistrer en PDF
N'importe quel navigateur de bureau
Oui
Copies ponctuelles d'une page
Bouton window.print()
Le navigateur du visiteur
Oui
Factures, reçus, billets
Puppeteer page.pdf()
Node.js pilotant Chrome
Oui
Rapports automatisés sur un serveur
Playwright page.pdf()
Un script Playwright pilotant un navigateur
Oui
PDF automatisés dans une configuration de tests existante
Le navigateur du visiteur
Non, la page devient une image
Téléchargements rapides côté client
jsPDF
Le navigateur du visiteur
Oui, pour le texte que vous dessinez
Construire un PDF à partir de données dans le code
Toutes les méthodes de cette page finissent par demander à un moteur de navigateur de mettre la page en forme sur papier, donc un bon CSS d'impression les améliore toutes. Construisez ci-dessous une feuille de style d'impression de départ, puis choisissez la méthode de conversion selon qui appuie sur le bouton : une personne, votre page ou un serveur.
Choisissez un format de papier, une orientation et une marge pour la règle @page.
Cochez les options utiles : masquer la navigation, garder les blocs entiers, imprimer l'adresse des liens, conserver les couleurs de fond.
Copiez le CSS dans votre feuille de style ; il ne s'applique qu'à l'impression.
Ouvrez l'aperçu avant impression de votre navigateur et choisissez la destination PDF pour vérifier le résultat.
Servez-vous de l'aperçu avant impression comme banc d'essai. Il se met à jour à chaque changement de CSS et ne coûte rien.
Masquez la navigation, les bandeaux de cookies et les barres latérales à l'impression ; personne ne peut cliquer dessus sur papier.
Gardez entiers les tableaux, figures et blocs de code avec break-inside: avoid.
Par défaut, les navigateurs suppriment les couleurs de fond à l'impression. print-color-adjust: exact leur demande de conserver les vôtres, mais les réglages d'impression du visiteur l'emportent toujours.
Utilisez pt, mm ou in pour les tailles d'impression quand vous avez besoin de mesures physiques exactes.
Questions fréquentes
Comment enregistrer une page web en PDF sans aucun outil ?
Ouvrez la boîte de dialogue d'impression du navigateur depuis son menu ou son raccourci clavier, puis choisissez l'option PDF dans la liste des destinations ou des imprimantes. Son nom exact dépend du navigateur et du système d'exploitation.
Comment ajouter un bouton Télécharger en PDF à ma page ?
La version honnête la plus simple est un bouton qui appelle window.print(), qui ouvre la même boîte de dialogue, où le visiteur peut enregistrer en PDF. Cela ne demande aucune bibliothèque, garde le texte sélectionnable et utilise votre CSS d'impression.
Comment éviter qu'un tableau soit coupé sur deux pages ?
Ajoutez break-inside: avoid au tableau, ou à ses lignes si le tableau est long. L'ancien page-break-inside: avoid est traité comme un alias, il fonctionne donc encore dans les anciennes feuilles de style.
Puis-je définir le format du papier en CSS ?
Oui. @page { size: A4 portrait; margin: 15mm; } définit la taille et les marges de la page. Puppeteer ne l'utilise que si preferCSSPageSize vaut true ; sinon, c'est sa propre option format, Letter par défaut, qui décide.
Pourquoi html2pdf.js produit-il des PDF flous ou énormes ?
Son README explique qu'il rend le contenu sous forme d'image et place cette image dans le PDF, si bien que le texte n'est ni sélectionnable ni consultable par recherche, et que les fichiers deviennent lourds. Utilisez l'impression ou un navigateur headless quand le texte compte.
Le CSS d'impression est la base
Un bloc @media print vous permet de restyler la page pour le papier sans toucher au design écran. Masquez ce qui n'a pas de sens sur papier, élargissez la colonne de contenu et choisissez une taille de police lisible.
La règle @page contrôle la page elle-même : taille, marges et orientation, avec :first, :left et :right pour traiter certaines pages différemment. MDN indique @page comme Baseline nouvellement disponible depuis décembre 2024, certaines parties variant encore d'un navigateur à l'autre.
Quand faire le rendu sur un serveur
Si les PDF doivent être produits sans intervention humaine, comme un rapport nocturne ou une facture envoyée par e-mail, utilisez un navigateur headless. page.pdf() de Puppeteer imprime avec le type de média print, accepte des options comme format, margin et printBackground, et peut enregistrer directement vers un chemin de fichier.
Le rendu serveur donne le même résultat à chaque fois, car vous contrôlez la version du navigateur et les polices. Cela implique aussi de faire tourner et de sécuriser ce navigateur, alors ne vous lancez que si un bouton d'impression ne suffit pas.
Référence du CSS d'impression
Règles et propriétés qui façonnent les pages imprimées
CSS
Valeurs
Usage
@media print { }
N'importe quelles règles
Styles appliqués uniquement à l'impression ou à l'enregistrement en PDF
@page { size }
A5, A4, A3, B5, B4, letter, legal, ledger ou longueurs ; portrait ou landscape
Format et orientation du papier
@page { margin }
Longueurs
Marges de chaque page
@page :first
Pseudo-classe
Marges différentes sur la première page
auto, avoid, avoid-page, avoid-column
Garder un bloc sur une seule page
break-before / break-after
auto, avoid, page, left, right
Forcer ou empêcher un saut sur un bloc
economy, exact
Si le navigateur peut supprimer couleurs et fonds
Exemples d'impression à copier
Un bouton imprimer ou enregistrer en PDF
window.print() ouvre la boîte de dialogue d'impression et bloque la page jusqu'à sa fermeture. La classe empêche le bouton lui-même d'apparaître sur le papier.
Mise en page de factures qui commence chaque facture sur une nouvelle page
break-after: page après chaque facture donne une facture par feuille quand plusieurs sont imprimées ensemble.
Préparer la page juste avant l'impression
beforeprint et afterprint se déclenchent autour de la boîte de dialogue, ce qui est utile pour déplier les sections repliées.
PDF côté serveur avec Puppeteer
preferCSSPageSize fait primer votre taille @page sur l'option format ; printBackground conserve les fonds.
Générateur de CSS d'impression
Format du papier
Orientation
Portrait
Paysage
Marge : {n} mm
Masquer la navigation, le pied de page et les barres latérales
Garder tableaux, figures et code sur une seule page