Convertir un fichier HTML en PDF sans perdre la mise en forme
Par l'équipe FreePDF ·
Envoyer un fichier .html à quelqu'un est toujours un peu fragile. Il s'affiche correctement sur la machine qui l'a produit, puis arrive sans sa feuille de style, ou s'ouvre dans un navigateur qui le met en page autrement, ou se fait bloquer en pièce jointe. Le convertir en PDF fige la page : un seul fichier, la même mise en page partout, et une impression conforme à ce qu'on voit.
Ce qui passe, et ce qui ne passe pas
Déposez le fichier .html ou .htm : il est rendu en PDF comme un navigateur le rendrait pour l'impression. Trois points méritent d'être connus avant de convertir :
- Le CSS contenu dans le fichier est appliqué. Tout ce qui se trouve dans un bloc
<style>ou un attributstyle=passe : polices, couleurs, bordures, tableaux, fonds. - JavaScript n'est pas exécuté. La page est rendue telle qu'elle figure dans le fichier. Si un graphique ou un tableau est dessiné par un script au chargement, le PDF récupère le conteneur vide de départ.
- Les chemins relatifs ne résolvent pas. Un fichier envoyé n'a aucune adresse par rapport à laquelle être relatif, donc
<img src="images/logo.png">ou<link href="style.css">ne pointe vers rien. Les URL absolues enhttps://sont récupérées normalement.
La solution pour ce dernier point : une page autonome. Collez le CSS dans un bloc <style> et utilisez des URL complètes pour les images, ou intégrez-les en URI data:. La plupart des outils qui produisent des rapports HTML — et l'option « Enregistrer la page → fichier unique » de votre navigateur — le font déjà.
Le format et les marges se pilotent depuis le CSS
Comme le rendu se fait en sortie d'impression, le CSS d'impression est respecté. Si c'est vous qui générez le HTML, quelques règles suffisent :
@page { size: A4; margin: 20mm; }fixe le format du papier et les marges. MettezLetterau lieu deA4si c'est votre format.break-before: pagesur un titre fait démarrer chaque section sur une nouvelle feuille.break-inside: avoidsur un tableau ou un encadré empêche qu'il soit coupé sur deux pages.- Les règles placées dans
@media prints'appliquent : la navigation, les bandeaux et tout ce que vous masqueriez à l'impression restent hors du PDF.
Quand la boîte d'impression du navigateur vaut mieux
Autant le dire franchement, car c'est souvent la bonne réponse : si vous voulez enregistrer une page web vivante en PDF, ouvrez-la et imprimez en PDF. Le navigateur a déjà la page chargée, ses images téléchargées, ses scripts exécutés et votre session ouverte ; il capture donc des choses qu'un fichier envoyé ne contient tout simplement pas.
Convertir le fichier ici est la meilleure voie quand vous avez sur le disque un .html autonome — une facture reçue par mail, un rapport écrit par un script, l'export d'un outil, un reçu enregistré — et que vous voulez un PDF net, sans les en-têtes, pieds de page et numéros que le navigateur imprime sur les bords. C'est aussi reproductible : le même fichier donne le même PDF à chaque fois, sur n'importe quelle machine, ce qu'une boîte d'impression pleine de réglages propres à chaque ordinateur ne garantit pas.
Et si le document est à écrire plutôt qu'à convertir, Markdown évite tout ce problème : aucun CSS à gérer, aucune image à retrouver.
Questions fréquentes
Puis-je donner une URL au lieu d'un fichier ?
Non : l'outil convertit un fichier que vous envoyez. Enregistrez d'abord la page (Ctrl+S / Cmd+S, en choisissant l'option fichier unique si votre navigateur la propose), puis envoyez-la. Pour une page derrière une connexion, l'enregistrer vous-même est de toute façon le seul moyen d'en sortir le contenu.
Mon PDF est sorti sans style. Que s'est-il passé ?
Presque toujours une feuille de style logée dans un fichier séparé. Le HTML référence style.css, vous n'avez envoyé que le HTML, il n'y a donc rien à charger. Ouvrez le fichier dans un éditeur de texte, déplacez le CSS dans un bloc <style> du <head>, et reconvertissez.