HTML vers PDF : Plus difficile que ça devrait l'être

Tu as une belle page web. Tu en as besoin en PDF. Ctrl+P, enregistrer en PDF. Fini ?

Parfois. Mais souvent le résultat a des mises en page cassées, des images manquantes, des sauts de page bizarres, et des en-têtes coupés en pleine phrase.

HTML et PDF sont fondamentalement différents. Les faire fonctionner ensemble demande des efforts.

Pourquoi c'est compliqué

HTML est fluide. Le contenu se déplace pour remplir l'espace disponible. Responsive. Flexible.

PDF est fixe. Dimensions de page spécifiques. Positionnement exact. Rien ne coule.

Convertir signifie prendre quelque chose conçu pour s'adapter et le forcer sur des pages rigides.

Les sauts de page sont l'ennemi

Ton beau paragraphe se retrouve divisé sur deux pages. L'en-tête du tableau est à la page 3, les données commencent à la page 4.

CSS a les propriétés page-break-before, page-break-after, et page-break-inside. Elles sont censées contrôler ça.

h2 {
  page-break-after: avoid;
}

table {
  page-break-inside: avoid;
}

"Censées" parce que le support navigateur varie. Teste minutieusement.

Ce qui se rend et ce qui ne se rend pas

Polices web : Parfois fonctionnent, parfois non. Teste avec les vraies polices, pas les fallbacks.

Couleurs d'arrière-plan : Souvent exclues par défaut (économise l'encre). Vérifie les paramètres "imprimer les arrière-plans".

Images : Les images externes peuvent ne pas se charger. Les problèmes CORS apparaissent au moment de la conversion.

Contenu rendu par JavaScript : Si le contenu se charge via JS, il pourrait ne pas exister quand le PDF capture la page.

Animations et transitions : Disparues. PDF est statique.

Feuilles de style d'impression

CSS a un type de média pour l'impression :

@media print {
  .no-print {
    display: none;
  }

  body {
    font-size: 12pt;
  }

  a::after {
    content: " (" attr(href) ")";
  }
}

Cache la navigation, ajuste les polices, affiche les URLs pour les liens. Conçois spécifiquement pour la sortie imprimée.

Différentes méthodes de conversion

Impression navigateur vers PDF : Bon pour des conversions ponctuelles. Les résultats varient selon le navigateur.

Navigateurs headless (Puppeteer, Playwright) : Contrôle programmatique. Résultats cohérents. Nécessite une configuration.

Bibliothèques PDF (wkhtmltopdf, WeasyPrint) : Outils dédiés. Meilleur contrôle sur la sortie.

Services en ligne : Téléverse HTML, obtiens PDF. Pratique pour un usage occasionnel.

Chacun a des compromis en qualité, vitesse et contrôle.

Conseils pour de meilleurs résultats

Utilise des largeurs fixes. Les mises en page responsive causent des résultats imprévisibles. Définis une largeur spécifique pour la sortie PDF.

Simplifie les mises en page. Les CSS grid et flexbox complexes peuvent casser. Les mises en page simples se convertissent plus fiablement.

Intègre les polices. Ne compte pas sur la disponibilité des polices système.

Teste tôt. Ne construis pas toute la page et essaie ensuite la conversion PDF. Teste au fur et à mesure.

Définis une taille de page explicite. PDF pense en pages. Dis-lui quelle taille.

@page {
  size: A4;
  margin: 1cm;
}

Quand utiliser du PDF natif

Si tu as besoin d'un contrôle précis—contrats, factures, rapports avec formatage exact—considère générer du PDF directement au lieu de convertir du HTML.

Les bibliothèques comme PDFKit, ReportLab ou iText créent du PDF sans la couche de conversion HTML.

Plus de travail, plus de contrôle, résultats plus prévisibles.

---

La conversion HTML vers PDF fonctionne, mais elle nécessite une attention aux styles d'impression, aux sauts de page et aux différences entre les médias web et imprimé. Teste minutieusement et définis les attentes en conséquence.