Comment convertir du HTML en PDF (en conservant le style CSS)
Pourquoi les conversions HTML vers PDF tournent mal
Quiconque s'est déjà battu avec un export PDF récalcitrant connaît cette galère. Tu convertis un fichier HTML, et le résultat est un désastre : mises en page cassées, polices manquantes, ou une page qui ne ressemble en rien à l'aperçu de ton navigateur. Le problème n'est pas le concept, c'est l'exécution. Les moteurs de rendu PDF varient énormément dans leur interprétation du CSS, et la plupart des convertisseurs génériques ignorent ou suppriment simplement les feuilles de style, à moins que tu ne leur forces la main. Le conflit fondamental se situe entre le modèle HTML basé sur le flux et le modèle PDF basé sur la page. Le contenu web s'étend et se contracte pour s'adapter à une fenêtre. Une page PDF a des dimensions fixes. Pas de défilement, pas de réagencement dynamique. Faire le pont entre ces deux mondes exige un moteur de rendu qui comprend les règles CSS pour la pagination, gère correctement les polices intégrées et respecte les mises en page modernes comme flexbox et grid. Beaucoup d'outils n'en sont tout simplement pas capables. Les échecs les plus courants sont terriblement prévisibles : les Google Fonts ne se chargent pas car le convertisseur fonctionne hors ligne ; les couleurs d'arrière-plan disparaissent car le moteur passe par défaut en « mode impression » qui les supprime pour économiser de l'encre ; les mises en page multi-colonnes s'effondrent en une seule et triste pile. Connaître ces pièges, c'est déjà avoir fait la moitié du chemin. Ce guide t'expliquera comment les éviter, que tu utilises [l'outil HTML vers PDF](/convert/html-to-pdf) de CocoConvert ou que tu construises ton propre workflow.
Ce que « conserver le style CSS » signifie vraiment
Avant de plonger dans les solutions, soyons précis sur ce que « conserver le CSS » veut dire. Le style dans un contexte PDF n'est pas une chose unique ; il s'agit de quatre catégories distinctes, et toutes ne survivent pas à chaque méthode de conversion. **Le style visuel** est le plus fragile. Cela inclut les couleurs, les bordures, les ombres portées (box-shadow) et les images de fond. Les moteurs de rendu d'impression suppriment souvent les arrière-plans par défaut pour économiser de l'encre. Dans la boîte de dialogue d'impression de Chrome, par exemple, tu dois fouiller dans « Plus de paramètres » et cocher « Graphiques d'arrière-plan », sinon tes fonds disparaîtront tout simplement. **La typographie** — famille de police, graisse, taille, interlignage — dépend entièrement de la disponibilité des polices. Si tes polices sont référencées par une URL distante, tout convertisseur qui ne récupère pas les ressources externes se rabattra sur les polices système par défaut. Ta superbe police Inter ou Lato se transforme instantanément en un triste Times New Roman. Le seul moyen infaillible de préserver les polices est de les intégrer. **La mise en page** est là où les choses se compliquent vraiment. Les fonctionnalités CSS modernes comme flexbox, CSS Grid et le positionnement absolu sont bien gérées par les moteurs basés sur Chromium. Mais les moteurs plus anciens comme wkhtmltopdf (qui utilise un moteur WebKit datant d'environ 2013) vont massacrer les mises en page modernes de manière prévisible et frustrante. **Le CSS spécifique à la page**, comme les règles `@page`, `page-break-before` et `break-inside: avoid`, est en fait mieux pris en charge lors de la conversion en PDF que dans les navigateurs. Ce CSS existe spécifiquement pour les médias paginés. En utilisant des blocs `@media print`, tu peux créer des styles qui ne s'appliquent qu'à la version PDF, te donnant un contrôle très fin sans gâcher l'apparence de ton site web. Savoir dans quelle catégorie se situe ton problème de style t'indique quels outils et techniques sont susceptibles de le résoudre.
Utiliser CocoConvert pour convertir du HTML en PDF
Le [convertisseur HTML vers PDF](/convert/html-to-pdf) de CocoConvert fonctionne sur un moteur de rendu moderne basé sur Chromium. Cela signifie qu'il gère le CSS contemporain — y compris flexbox, Grid, les variables CSS et les valeurs `calc()` — avec une grande fidélité. Voici comment obtenir des résultats parfaits. **Étape 1 : Prépare ton fichier HTML.** Si tes styles sont dans une feuille de style externe, tu as deux options : soit les intégrer directement dans le HTML (inline) avec une bibliothèque comme Juice, soit t'assurer que le chemin de la feuille de style est relatif et inclus dans ton envoi. CocoConvert traite un seul fichier HTML à la fois et ne récupère pas les URL distantes. Les Google Fonts ou les feuilles de style hébergées sur un CDN ne se chargeront pas. **Étape 2 : Intègre tes polices.** C'est non négociable pour une typographie personnalisée. Convertis tes fichiers de police en base64 et intègre-les directement dans une balise `<style>` en utilisant `@font-face`. Oui, cela augmente la taille du fichier, mais c'est le seul moyen de garantir que tes polices s'affichent correctement. Pour une police de corps de texte classique avec des graisses normale et grasse, cela peut ajouter 80 à 150 Ko à ton fichier HTML. **Étape 3 : Envoie le fichier et définis les options de page.** Une fois le fichier envoyé, CocoConvert présente des options pour la taille de la page (A4, Lettre, Légal ou dimensions personnalisées), l'orientation et les marges. Le format A4 avec des marges de 15 mm de chaque côté est un bon réglage par défaut. Si tu convertis un tableau de bord large ou un grand tableau, passe en orientation paysage. **Étape 4 : Active les graphiques d'arrière-plan.** C'est l'erreur la plus fréquente, et de loin. Dans le panneau d'options de CocoConvert, tu dois basculer « Imprimer les arrière-plans » sur Activé. Si tu ne le fais pas, tout élément avec une `background-color` ou une `background-image` s'affichera en blanc uni. **Étape 5 : Télécharge et vérifie.** Ne te contente pas de jeter un œil au PDF dans ton navigateur. Ouvre-le dans un vrai lecteur comme Adobe Acrobat Reader et vérifie que les polices sont correctement intégrées en allant dans Fichier > Propriétés > Polices. Chaque police de la liste devrait avoir la mention « Incorporé (sous-ensemble) » à côté.
Gérer les limitations : ce que CocoConvert ne peut pas faire
Soyons honnêtes sur ce que CocoConvert n'est pas. C'est un convertisseur généraliste puissant, mais certaines tâches dépassent son champ d'action. Connaître ces limites à l'avance t'évitera de t'acharner sur des impasses. **Contenu rendu par JavaScript.** Si ta page est construite par un framework comme React ou Vue, envoyer le fichier HTML source ne fonctionnera pas. Le convertisseur voit le HTML statique, pas la page finale construite par JavaScript. Pour les pages riches en JS, ta meilleure option est d'abord d'enregistrer le HTML entièrement rendu depuis ton navigateur (clic droit > Enregistrer sous > Page web, complète) et d'envoyer ce fichier. Autrement, il te faudrait un outil de navigateur sans tête comme Puppeteer. **Éléments interactifs.** Les formulaires, les menus déroulants et les états de survol (hover) ne sont pas interactifs dans un PDF. La conversion capture un instantané statique de l'état par défaut de l'élément. Si un accordéon est fermé lorsque la page est rendue, il sera fermé dans le PDF. Il n'y a aucun moyen de contourner cela ; c'est la nature du format PDF. **Fichiers très volumineux.** CocoConvert a une limite de 50 Mo pour l'offre gratuite et de 200 Mo pour les abonnements payants. Ça peut paraître généreux, mais un fichier HTML avec de nombreuses images encodées en base64 peut atteindre ces limites étonnamment vite. Un seul PNG en haute résolution peut facilement ajouter 3 à 5 Mo à la taille du fichier. **Animations SVG complexes.** Les SVG statiques s'affichent magnifiquement. Cependant, toute animation CSS ou SMIL à l'intérieur d'un SVG sera figée à sa première image. CocoConvert est conçu pour la conversion simple, basée sur des fichiers. Quand tu as un document HTML finalisé et que tu as besoin d'un PDF fiable, c'est le bon outil. Pour des pipelines complexes côté serveur qui nécessitent l'exécution de JavaScript, tu devras te tourner vers des outils programmatiques comme Playwright ou Puppeteer.
Techniques CSS pour un rendu PDF plus propre
Tu peux t'épargner bien des tracas en écrivant ton CSS en pensant dès le départ à la sortie PDF. Corriger les problèmes après coup est toujours plus difficile. **Utilise `@media print` pour les styles spécifiques au PDF.** C'est ton arme secrète. Encadre toutes les règles réservées au PDF dans un bloc `@media print` pour masquer des éléments comme les barres de navigation, supprimer les ombres portées qui ont un rendu brouillon à l'impression, ou ajuster la taille des polices pour la lisibilité sur une page. Par exemple : ```css @media print { nav, .sidebar { display: none; } body { font-size: 11pt; } .card { box-shadow: none; border: 1px solid #ddd; } } ``` **Contrôle les sauts de page explicitement.** Ne laisse pas le moteur de rendu décider où couper les pages. Utilise `break-before: page` pour forcer une nouvelle page PDF avant une section importante, et applique `break-inside: avoid` à des éléments comme les tableaux et les figures pour éviter qu'ils ne soient coupés maladroitement sur deux pages. C'est absolument essentiel pour des rapports d'aspect professionnel. **Définis des dimensions `@page` explicites.** Si tu connais la taille de page cible, déclare-la dans ton CSS. Cela évite les décalages entre tes styles et les paramètres du convertisseur, qui peuvent causer des troncatures de texte inattendues. ```css @page { size: A4 portrait; margin: 15mm 20mm; } ``` **Évite les unités de viewport dans les mises en page pour l'impression.** Les unités comme `vw` et `vh` n'ont aucun sens pour une page PDF fixe. Pour les éléments qui doivent s'étendre sur toute la page, utilise plutôt `mm`, `pt` ou des pourcentages. **Teste d'abord avec l'aperçu avant impression de Chrome.** Avant d'envoyer quoi que ce soit, fais Ctrl+P (ou Cmd+P) et sélectionne « Enregistrer au format PDF ». Cela te donne un aperçu instantané utilisant le même moteur Chromium qui alimente CocoConvert. C'est le moyen le plus rapide d'itérer sur ton CSS sans perdre de temps avec des envois répétés.
Convertir une page web complète (URL) vs un fichier HTML
L'approche pour convertir un fichier HTML local est fondamentalement différente de celle pour convertir une URL de page web en direct. Tu dois choisir le bon outil pour la bonne tâche. **Convertir un fichier HTML local** est ce dans quoi [l'outil HTML vers PDF](/convert/html-to-pdf) de CocoConvert excelle. Cette méthode nécessite un document autonome. Tout le CSS doit être intégré (inline) ou dans une balise `<style>`, toutes les images doivent être encodées en base64 ou référencées via des chemins relatifs dans un fichier ZIP, et les polices doivent être intégrées. Vois ça comme l'envoi d'un colis scellé : tout ce dont le moteur de rendu a besoin doit être à l'intérieur dès le départ. Cela rend le processus incroyablement fiable. **Convertir une page web en direct via son URL** est une tout autre affaire. Cela exige un outil capable de lancer une véritable session de navigateur, de naviguer vers l'URL, d'attendre l'exécution du JavaScript et le téléchargement des polices web, puis d'imprimer en PDF. Des outils comme Puppeteer, Playwright, ou des services comme Browserless.io sont conçus pour cela. La contrepartie est une montagne de complexité. Tu dois faire face à l'authentification, aux pop-ups de cookies, au contenu chargé paresseusement (lazy-loading) et aux vitesses de réseau imprévisibles. Pour la plupart des tâches courantes — générer des factures PDF à partir d'un modèle, exporter un rapport ou archiver un document stylisé — l'approche basée sur un fichier est plus simple et beaucoup plus prévisible. Tu contrôles entièrement l'entrée, donc la sortie est cohérente. Si tu construis un système qui génère des PDF à partir de données utilisateur en direct, la meilleure pratique est une approche hybride : remplis un modèle HTML sur ton serveur avec les données de l'utilisateur, puis passe cette chaîne HTML entièrement rendue à une API de conversion. L'API de CocoConvert supporte ce workflow, acceptant le HTML directement dans une requête POST.
Vérifier le résultat : une checklist de qualité pour PDF
Ce n'est pas parce qu'un PDF a l'air correct sur ton écran qu'il est prêt. Avant d'envoyer ce fichier à un client ou de le publier, passe en revue cette checklist rapide mais essentielle. **Les polices sont-elles intégrées ?** Ouvre le PDF dans Adobe Acrobat Reader et va dans Fichier > Propriétés > Polices. Chaque police que tu as utilisée devrait être listée avec la mention « Incorporé (sous-ensemble) ». Si une police n'est pas intégrée, elle sera remplacée par une police système par défaut sur toute machine qui ne l'a pas installée, ruinant ton design. **Les couleurs sont-elles exactes ?** Le CSS web utilise l'espace colorimétrique RVB. La plupart des PDF destinés aux écrans sont très bien en RVB. Cependant, si le PDF est destiné à l'impression commerciale, il peut nécessiter un espace colorimétrique CMJN, ce qui est une étape de conversion distincte qui se produit après le processus initial de HTML vers PDF. **Le texte est-il sélectionnable et consultable ?** Essaie de cliquer et de faire glisser pour sélectionner une ligne de texte. Si tu y arrives, le texte est du vrai texte vectoriel, ce qui est bon pour la recherche et l'accessibilité. Si tu ne peux pas le sélectionner, le convertisseur a peut-être rastérisé la page en une image plate — une catastrophe pour le copier-coller, les lecteurs d'écran et la recherche de texte. **Le nombre de pages et les sauts sont-ils corrects ?** Fais défiler rapidement chaque page. Y a-t-il des titres orphelins en bas d'une page ? Des tableaux ou des graphiques sont-ils coupés à des endroits bizarres ? Des figures sont-elles séparées de leurs légendes ? **La taille du fichier est-elle raisonnable ?** Un PDF de dix pages, riche en texte, devrait faire bien moins de 1 Mo. S'il fait 15 Mo, quelque chose ne va pas. Le coupable est généralement des images non compressées ou une rastérisation accidentelle de la page entière. **Les hyperliens sont-ils fonctionnels ?** Clique sur les liens dans le document. Un bon convertisseur préserve les balises `<a href>` en tant que liens cliquables dans le PDF final. CocoConvert le fait par défaut, mais ça vaut toujours la peine de vérifier. Passer trois minutes sur ces six vérifications te permettra d'intercepter 95 % des problèmes de conversion avant qu'ils ne causent des ennuis à quelqu'un d'autre. C'est la touche finale qui distingue un résultat professionnel d'un travail d'amateur.