Comment convertir du HTML en PDF

Créer des PDF à partir de HTML est utile pour générer des factures, rapports, lettres, certificats, et tout document où vous voulez controler la mise en page avec CSS mais distribuer en PDF. Un convertisseur HTML-vers-PDF basé sur navigateur utilise le moteur de rendu de votre propre navigateur, donc le résultat correspond à ce que vous voyez dans l'aperçu en direct, sans téléversement de serveur.

Comment convertir HTML en PDF

1. Collez votre HTML : entrez votre code HTML incluant tout CSS inline ou balises <style> dans l'éditeur. Le code peut inclure une structure de page complète avec en-tetes, tableaux, images et style.
2. Prévisualisez la sortie : un aperçu en direct montre exactement à quoi ressemblera votre PDF pendant que vous tapez. Ajustez votre HTML et CSS jusqu'à ce que l'aperçu corresponde à ce que vous voulez.
3. Générez et téléchargez : cliquez sur le bouton générer pour créer le PDF dans votre navigateur, puis téléchargez-le instantanément.

Ce que vous pouvez créer

• Factures et reçus : tableaux structurés avec image de marque, lignes d'articles et totaux
• Rapports : documents formatés avec titres, paragraphes, graphiques et tableaux de données
• Certificats : mises en page stylisées avec polices personnalisées, bordures et texte centré
• Lettres : correspondance professionnelle avec en-tete, corps et zones de signature
• CV : mises en page conçues qui s'exportent comme des PDF propres pour les candidatures
• Billets et laissez-passer d'événements : blocs structurés de codes QR avec infos de participants
• Étiquettes d'expédition : formats standardisés pour les transporteurs postaux
• Cartes d'embarquement et confirmations : versions imprimables des réservations en ligne
• Invitations : cartes stylisées avec images, polices et bordures décoratives

Une brève histoire de la conversion HTML-vers-PDF

Au début du Web (1995-2005), créer un PDF à partir de HTML nécessitait des outils coté serveur : Apache FOP (1999), PrinceXML (2002) ou wkhtmltopdf (2010), qui s'exécutaient tous sur un serveur backend et nécessitaient de téléverser le contenu. La qualité de sortie variait énormément parce que chaque moteur de rendu implémentait CSS différemment.

La conversion coté navigateur est devenue pratique en 2014 avec des bibliothèques comme jsPDF et html2pdf.js, qui utilisent HTML5 Canvas pour rasteriser le contenu. Le résultat était décent pour des documents simples mais échouait sur des mises en page complexes et du texte sélectionnable.

La percée fut le mode headless de Chromium (2017), qui a exposé le meme moteur de rendu que Chrome utilise pour les pages normales. Puppeteer (Node.js, 2017) a rendu la génération PDF coté serveur Chromium accessible aux développeurs. Les convertisseurs basés sur navigateur utilisent désormais l'API Print (window.print()) avec les règles CSS @page, le meme chemin que le mode headless de Chromium utilise, donnant une sortie identique entre l'aperçu et le PDF.

En 2026, HTML-vers-PDF basé sur navigateur est le bon choix pour la plupart des documents. Le rendu coté serveur n'a de sens que pour les très gros documents (100+ pages), le traitement par lot automatisé, ou lorsque vous devez fusionner des PDF de plusieurs sources.

Conseils de style pour la sortie PDF

Utilisez des styles inline ou des balises <style> : les feuilles de style externes ne sont pas chargées. Mettez tout votre CSS soit inline sur les éléments soit dans un bloc <style> dans le HTML.

Définissez les marges de page : utilisez CSS @page { margin: 20mm; } pour controler l'espace blanc autour de votre contenu dans le PDF.

Utilisez des unités adaptées à l'impression : mm, cm et pt sont plus prévisibles dans les PDF que px ou rem. Utilisez mm pour les marges et l'espacement qui doivent correspondre aux dimensions du monde réel.

Évitez les mises en page dépendantes du viewport : les largeurs en pourcentage et les largeurs en pixels fixes fonctionnent mieux. Les unités de viewport (vw, vh) peuvent ne pas se comporter comme prévu dans la sortie PDF.

Controler les sauts de page : utilisez page-break-before, page-break-after et page-break-inside (ou les plus récents break-before, break-after, break-inside) pour controler où commencent les nouvelles pages. break-inside: avoid empeche un seul bloc de se diviser sur plusieurs pages.

Utilisez @media print pour les règles PDF uniquement : tout CSS dans @media print { ... } s'applique uniquement lors de la génération du PDF, pas dans l'aperçu. Utile pour masquer les éléments uniquement à l'écran comme les barres de navigation.

Exemple de mode impression CSS

@page {
  size: A4;
  margin: 20mm 15mm;
}

@media print {
  .no-print { display: none; }
  h1 { page-break-before: always; }
  table { page-break-inside: avoid; }
  a { color: black; text-decoration: none; }
}

body {
  font-family: 'Helvetica', sans-serif;
  font-size: 11pt;
  line-height: 1.4;
  color: #1a1a1a;
}

Tailles de page

Valeurs courantes de @page size :

• A4 (210 × 297 mm) - défaut global hors États-Unis
• letter (8.5 × 11 in) - défaut américain
• legal (8.5 × 14 in) - documents juridiques américains
• A3 (297 × 420 mm) - affiches, plans
• A5 (148 × 210 mm) - livrets, dépliants
• Personnalisé : size: 100mm 150mm pour n'importe quelles dimensions

Ajoutez landscape pour l'orientation paysage : size: A4 landscape.

Pièges courants

• Les polices externes ne se chargent pas : les polices Web hébergées sur des CDN externes peuvent ne pas etre intégrées. Utilisez @font-face avec un fichier de police encodé en base64 à l'intérieur de la balise <style>, ou tenez-vous-en aux polices système (Helvetica, Times, Arial, Courier).
• Les images se chargent lentement ou pas du tout : les images externes peuvent ne pas etre pretes lorsque le PDF est généré. Utilisez des URI de données base64 pour une inclusion garantie : <img src="data:image/png;base64,iVBORw0KGgoAAAA...">.
• Couleurs d'arrière-plan supprimées à l'impression : les navigateurs suppriment les couleurs et images d'arrière-plan par défaut à l'impression pour économiser l'encre. Ajoutez -webkit-print-color-adjust: exact; print-color-adjust: exact; à votre body ou à des éléments spécifiques.
• Les mises en page CSS Grid se cassent : les anciens moteurs PDF ne prennent pas entièrement en charge CSS Grid. Testez avec l'aperçu en direct ; revenez à table ou Flexbox si Grid produit des résultats inattendus.
• Sauts de page au milieu d'une ligne de tableau : utilisez tr { page-break-inside: avoid; } pour garder les lignes ensemble, ou thead { display: table-header-group; } pour répéter l'en-tete du tableau sur chaque page.
• Les tailles de pixels ne correspondent pas aux dimensions physiques : 1 px CSS = 1/96 pouce lors de l'impression. Donc une boite width: 96px fait exactement 1 pouce de large dans le PDF. Utilisez mm ou pt pour un dimensionnement physique sans ambiguité.
• Les hyperliens perdent leur couleur : les PDF rendent les balises <a> avec leur couleur définie par CSS. Si vous voulez du texte noir mais des hyperliens fonctionnels, utilisez color: black et laissez le soulignement visuel du lecteur PDF indiquer le lien.

Alternatives à considérer

• Imprimer en PDF directement depuis le navigateur (Ctrl/Cmd+P, puis « Enregistrer en PDF ») : zéro configuration, fonctionne pour toute page Web que vous pouvez ouvrir. Idéal pour les conversions ponctuelles.
• Rendu coté serveur (Puppeteer, Playwright, PrinceXML) : pour la génération par lot, l'automatisation ou les très gros documents. Nécessite une configuration de développement.
• Markdown vers PDF : si vous écrivez en Markdown, des outils dédiés (Pandoc, Marp, Typora) gèrent la conversion en une seule étape sans échafaudage HTML.
• Templating de document (DocRaptor, Tectonic, LaTeX) : pour des documents hautement typographiés (articles académiques, livres) où vous avez besoin d'un controle précis sur le crénage, les ligatures, les maths.

Pour les documents commerciaux quotidiens (factures, rapports, certificats), un convertisseur HTML-vers-PDF de navigateur est plus rapide et tout aussi soigné.

Conseils

• Prévisualisez d'abord : vérifiez toujours l'aperçu en direct avant de générer. Il est beaucoup plus rapide d'itérer sur HTML que de générer un nouveau PDF à chaque fois.
• Utilisez base64 pour les images : convertissez les images en URI de données base64 pour une inclusion garantie dans le PDF. Les URL externes peuvent échouer en raison des restrictions CORS.
• Restez simple : les mises en page CSS complexes (grilles imbriquées, éléments positionnés qui se chevauchent) peuvent ne pas se rendre parfaitement. Les mises en page plus simples produisent des PDF plus fiables.
• Testez les sauts de page : pour les documents multipages, utilisez page-break-before: always pour controler où commencent les nouvelles pages.
• CSS en mode impression : enveloppez vos styles finaux dans @media print { ... } pour qu'ils s'appliquent uniquement au PDF généré, pas à l'aperçu. Utile pour masquer les éléments d'interface utilisateur d'écran.
• Utilisez HTML sémantique : <h1>, <h2>, <p>, <table> produisent des PDF accessibles plus propres que <div> partout. Les lecteurs d'écran les analysent correctement lorsque l'utilisateur ouvre le PDF.

Confidentialité et documents sensibles

Le convertisseur HTML-vers-PDF fonctionne entièrement dans votre navigateur. Le HTML que vous collez, les images que vous intégrez et le PDF généré restent tous sur votre appareil. Rien n'est téléversé sur un serveur, enregistré ou partagé avec qui que ce soit.

Cela importe parce que les entrées HTML-vers-PDF sont souvent sensibles : données de facture avec noms de clients, brouillons de contrats avec conditions tarifaires, rapports internes avec chiffres financiers, certificats avec informations personnelles. Les services HTML-vers-PDF en nuage envoient par conception votre HTML sur leur serveur, génèrent le PDF là-bas et le renvoient. Certains conservent les entrées à des fins « d'amélioration » ou analytique. Pour les documents contenant des informations confidentielles, un convertisseur basé sur navigateur est le choix le plus sur.

La conversion basée sur navigateur fonctionne également hors ligne une fois la page chargée, et est assez rapide pour un retour instantané pendant que vous itérez sur le HTML.