HTML vers PDF avec styles CSS manquants : causes et corrections
Vous convertissez une page web ou un fichier HTML en PDF et le résultat ressemble à du texte brut des années 1990 : sans couleurs, sans polices stylisées, sans mise en page. Ou pire, la mise en page est complètement cassée, les éléments se chevauchent et les images n'apparaissent pas. Les problèmes de CSS manquants lors de la conversion HTML vers PDF sont parmi les plus fréquents chez les développeurs web et les équipes digitales françaises. Voici les causes précises et les solutions pour chaque cas.
Pourquoi les styles CSS disparaissent-ils lors de la conversion ?
La conversion HTML vers PDF est techniquement un processus de rendu : un moteur de rendu (Chromium, wkhtmltopdf, LibreOffice) charge votre HTML et le transforme en PDF. Les problèmes de CSS surviennent quand le moteur ne peut pas accéder aux ressources nécessaires. Les causes les plus fréquentes sont les fichiers CSS référencés en chemins relatifs qui ne sont pas accessibles depuis le contexte de conversion, les polices Google Fonts ou Adobe Fonts chargées depuis des serveurs externes bloqués, les feuilles de style spécifiques au média impression non définies (les CSS pour l'écran ne s'appliquent pas de la même façon en mode impression PDF), les variables CSS modernes non supportées par le moteur de rendu utilisé, et les styles CSS-in-JS (React, Vue) qui nécessitent l'exécution de JavaScript.
Diagnostiquer les ressources CSS manquantes
Pour identifier ce qui manque, ouvrez les outils de développement de votre navigateur (F12) sur la page à convertir et allez dans l'onglet Réseau. Filtrez par 'CSS' et 'Polices'. Regardez si des ressources sont en erreur (statut 404 ou échec de chargement). Ensuite, essayez d'ouvrir votre fichier HTML directement dans le navigateur depuis le système de fichiers (file:///) et observez si les styles apparaissent — si non, les chemins relatifs sont incorrects. Imprimez également la page depuis votre navigateur (Ctrl+P) pour voir l'aperçu impression : c'est très proche de ce que produira la conversion HTML vers PDF.
- 1Ouvrez la page dans Chrome et lancez les outils de développement (F12)
- 2Allez dans l'onglet Réseau et filtrez par 'CSS' et 'Font'
- 3Identifiez les ressources en erreur (statut rouge ou icône d'erreur)
- 4Vérifiez l'aperçu d'impression (Ctrl+P) qui révèle les problèmes de rendu PDF
- 5Testez avec les chemins absolus pour les ressources CSS et polices
Solutions pour chaque type de problème CSS
Pour les fichiers CSS en chemin relatif, convertissez-les en chemins absolus ou injectez le CSS directement dans la balise <style> du HTML. Pour les polices web (Google Fonts), intégrez le fichier de police directement en base64 dans la balise style, ou utilisez des polices système (Arial, Helvetica, Georgia) qui sont disponibles partout. Pour les styles à médias, ajoutez une règle @media print dans votre CSS qui définit explicitement les styles pour l'impression — couleurs, tailles de police, marges et comportement des éléments. Pour les frameworks CSS modernes (Tailwind, Bootstrap), assurez-vous que le fichier CSS compilé est bien inclus et non rechargé depuis un CDN.
- 1Convertissez tous les chemins CSS relatifs en chemins absolus ou intégrez le CSS inline
- 2Remplacez les polices web externes par des polices système ou intégrez-les en base64
- 3Ajoutez des règles @media print dans votre CSS pour cibler le rendu impression/PDF
- 4Vérifiez que JavaScript est bien exécuté avant la conversion si des styles dépendent de JS
- 5Testez le rendu d'impression dans Chrome avant de lancer la conversion
Optimiser les CSS spécifiques à l'impression PDF
La bonne pratique est de créer une feuille de style dédiée à l'impression, liée avec <link rel='stylesheet' media='print' href='print.css'>. Dans cette feuille, vous contrôlez précisément ce qui doit apparaître en PDF : masquez les éléments de navigation, les sidebars et les publicités avec display:none, élargissez le contenu principal à la pleine largeur de page, définissez les marges en centimètres ou millimètres pour un rendu prévisible, et utilisez les propriétés page-break-before, page-break-after et page-break-inside pour contrôler les sauts de page. Cette approche, utilisée par les équipes techniques des grands médias français pour leurs articles en PDF, garantit un rendu propre et professionnel.
Utiliser LazyPDF pour convertir vos HTML en PDF
L'outil HTML vers PDF de LazyPDF utilise un moteur de rendu moderne qui supporte les CSS3 et les polices web courantes. Pour de meilleurs résultats, entrez une URL publique (accessible depuis internet) plutôt qu'un fichier local — le moteur pourra accéder à toutes les ressources CSS et images liées. Si vous devez convertir un fichier local avec des dépendances, la solution la plus robuste est d'héberger temporairement le fichier sur un espace web ou un service comme Netlify Drop, puis de convertir l'URL publique. Pour les pages qui utilisent JavaScript pour générer le contenu, l'outil attend l'exécution complète avant de créer le PDF.
Questions fréquentes
Pourquoi les couleurs de fond s'impriment-elles pas dans le PDF ?
Par défaut, les navigateurs et moteurs de rendu PDF suppriment les couleurs et images de fond pour économiser l'encre. Pour forcer l'affichage des fonds, ajoutez dans votre CSS d'impression : background-color: [couleur] !important et -webkit-print-color-adjust: exact (ou print-color-adjust: exact). Ces propriétés indiquent au moteur de rendre les couleurs de fond telles que définies.
Les animations et transitions CSS apparaissent-elles dans le PDF ?
Non, un PDF est statique et ne peut pas contenir d'animations. Les transitions CSS et les keyframe animations sont ignorées lors de la conversion. Le PDF capturera l'état à l'instant de la conversion. Si vous avez un élément animé, il sera rendu dans son état initial ou dans son état au moment où le moteur a capturé la page.
Peut-on utiliser CSS Grid ou Flexbox dans un HTML destiné à être converti en PDF ?
Oui, si le moteur de rendu utilisé est basé sur Chromium (Chrome, Puppeteer). Les outils basés sur des moteurs plus anciens comme wkhtmltopdf ont un support CSS limité et peuvent mal rendre Grid et Flexbox. LazyPDF utilise un moteur moderne qui supporte les CSS3 incluant Grid et Flexbox.
Comment définir les marges et le format de page dans la conversion HTML vers PDF ?
Utilisez la règle CSS @page dans votre feuille de style : @page { margin: 2cm; size: A4; }. Vous pouvez définir des marges différentes pour les pages paires/impaires avec @page :left et @page :right, et un format différent pour la première page avec @page :first.