HTML vers PDF : traitement des styles, CSS et mise en page

Pourquoi convertir HTML en PDF

Le contenu d'une page web, pour l'imprimer, l'archiver ou le partager hors ligne, est plus facilement converti en PDF. La conversion HTML vers PDF transforme une page web dynamique en document fixe.

Cas fréquents :

• Sauvegarde d'articles web
• Génération de factures/reçus en ligne
• Export de rapports
• Création de livres numériques

Les méthodes de conversion HTML vers PDF

Impression via navigateur

La méthode la plus simple : dans le navigateur, Ctrl+P, destination « Enregistrer au format PDF ». Le moteur de rendu du navigateur convertit directement la page web en PDF.

Avantages : gratuit, bonne prise en charge CSS. Inconvénients : opération manuelle, non adaptée au traitement par lots ; les éléments interactifs de la page peuvent interférer.

Outil en ligne

Avec l'outil HTML vers PDF :

1. Saisir l'URL de la page ou coller le HTML
2. L'outil effectue le rendu et convertit
3. Télécharger le PDF

Traitement côté navigateur, contenu non téléchargé.

Bibliothèques de programmation

Pour les scénarios de développement, utiliser des bibliothèques :

• JavaScript : Puppeteer (Chrome headless), jsPDF
• Python : pdfkit, WeasyPrint
• Côté serveur : wkhtmltopdf

Traitement des styles CSS

Niveau de prise en charge CSS

Les différents moteurs de conversion ne prennent pas en charge le CSS de la même manière :

• Moteur navigateur (Chrome) : prise en charge la plus complète, flex et grid fonctionnent
• wkhtmltopdf : basé sur un ancien WebKit, ne prend pas en charge les nouvelles fonctionnalités CSS
• WeasyPrint : prend en charge la majeure partie de CSS 2.1, une partie de CSS 3

Avant la conversion en PDF, vérifier les fonctionnalités CSS prises en charge par le moteur.

CSS dédié à l'impression

Utiliser @media print pour écrire des styles dédiés à l'impression :

@media print {
  .no-print { display: none; }  /* Masquer les éléments à ne pas imprimer */
  body { font-size: 12pt; }     /* Utiliser pt au lieu de px pour l'impression */
  a { text-decoration: none; }  /* Supprimer les soulignements de liens */
}

Masquer les éléments interactifs

La navigation, les boutons et la publicité d'une page web n'ont pas de sens en PDF. Les masquer avec @media print :

@media print {
  nav, footer, .ad, .sidebar { display: none; }
}

Traitement des couleurs

• L'écran utilise RGB, l'impression PDF utilise CMYK
• La couleur d'arrière-plan n'est pas imprimée par défaut, pour forcer l'impression utiliser -webkit-print-color-adjust: exact
• Les arrière-plans foncés consomment beaucoup d'encre en PDF, envisager de passer en couleur claire

Contrôle de la pagination

Sauts de page

Contrôler la pagination avec CSS :

h1 { page-break-before: always; }  /* Saut de page avant le titre */
table { page-break-inside: avoid; } /* Ne pas couper le tableau */
img { page-break-inside: avoid; }   /* Ne pas couper l'image */

Propriétés de pagination

• page-break-before : saut de page avant l'élément
• page-break-after : saut de page après l'élément
• page-break-inside : pas de saut de page dans l'élément

Éviter les lignes veuves et orphelines

p { orphans: 3; widows: 3; }  /* Au moins 3 lignes en fin/début de paragraphe */

En-têtes et pieds de page

Impression navigateur

Dans la boîte de dialogue d'impression du navigateur, définir les en-têtes et pieds de page (numéros de page, titre, URL). Mais les styles sont limités.

Génération par bibliothèque

Puppeteer et autres bibliothèques permettent de personnaliser les en-têtes et pieds de page :

const pdf = await page.pdf({
  displayHeaderFooter: true,
  headerTemplate: '<div style="font-size:9pt;">Titre du rapport</div>',
  footerTemplate: '<div>Page <span class="pageNumber"></span></div>',
  margin: { top: '60px', bottom: '60px' }
});

Traitement des images

Chemin des images

Les images en HTML utilisent un chemin absolu ou base64 :

• Chemin absolu : <img src="https://example.com/img.png">
• base64 : <img src="data:image/png;base64,...">
• Chemin relatif : peut être introuvable lors de la conversion en PDF, utiliser un chemin absolu ou base64

Intégration en base64

Pour les petites images, intégrer en base64 pour éviter les problèmes de chemin :

<img src="data:image/png;base64,iVBORw0KGgo...">

Pour les grandes images, le base64 augmente la taille du HTML, à utiliser avec discernement.

Netteté des images

• Utiliser des images haute résolution
• Ne pas agrandir les images au-delà de leur taille d'origine
• Les images vectorielles (SVG) sont les plus nettes en PDF

Traitement des polices

Chargement des polices

Les pages web utilisent des polices Web (Google Fonts, etc.), lors de la conversion en PDF, les polices doivent être chargées complètement. Avec les bibliothèques de conversion, s'assurer que les polices sont chargées avant la conversion.

Intégration des polices

Le PDF doit intégrer les polices pour un affichage cohérent sur tous les appareils. Les outils de conversion les intègrent généralement automatiquement.

Polices courantes

Utiliser des polices courantes (Arial, Times New Roman, SimSun) pour éviter les problèmes de polices.

Conversion avec DocsAll

Outil HTML vers PDF :

1. Saisir l'URL de la page ou coller le code HTML
2. L'outil effectue le rendu de la page
3. Conversion en PDF
4. Télécharger

Traitement côté navigateur, contenu non téléchargé sur le serveur.

Questions fréquentes

Styles perdus

• CSS non chargé (chemin CSS externe erroné)
• Utilisation de fonctionnalités CSS non prises en charge par le moteur
• Solution : utiliser du CSS en ligne, utiliser des fonctionnalités CSS prises en charge

Pagination coupant le contenu

• Pas de contrôle de pagination défini
• Solution : ajouter page-break-inside: avoid

Images non affichées

• Chemin erroné
• Restriction cross-origin (CORS)
• Solution : utiliser un chemin absolu ou base64

Caractères chinois illisibles

• La police ne prend pas en charge le chinois
• L'encodage n'est pas UTF-8
• Solution : utiliser une police prenant en charge le chinois, déclarer l'encodage UTF-8 dans le HTML

Couleur d'arrière-plan non imprimée

• Le navigateur n'imprime pas les arrière-plans par défaut
• Solution : en CSS définir -webkit-print-color-adjust: exact, ou dans la boîte de dialogue d'impression cocher « Graphiques d'arrière-plan »

Page trop large

• La largeur de la page web dépasse la page PDF
• Solution : ajuster la largeur CSS, ou passer en orientation paysage

Résumé

La conversion HTML vers PDF repose sur le traitement des styles CSS et le contrôle de la pagination. Utiliser @media print pour les styles d'impression et masquer les éléments interactifs. Contrôler la pagination avec les propriétés page-break. Utiliser un chemin absolu ou base64 pour les images. L'outil HTML vers PDF de DocsAll s'exécute côté navigateur, le contenu reste local.