Convertir du HTML en PDF

Ce que la page a le droit d'atteindre, et ce que contrôle le CSS

La conversion n'a pas accès au réseau et n'exécute aucun script, et ce sont deux décisions de sécurité, pas des fonctions manquantes. Un convertisseur qui irait chercher tout ce qu'une page soumise lui demande pourrait être pointé vers des adresses que seul notre serveur peut voir, et un convertisseur qui exécuterait les scripts ferait tourner le code d'un inconnu. Ainsi, une feuille de style liée à un CDN n'arrive pas, une image avec une adresse web ordinaire ne se charge pas, une police web est remplacée sans avertissement, et une page qui se construit en JavaScript est convertie telle que le balisage la décrit avant toute exécution. La solution est toujours la même : intégrez le CSS dans un bloc style et les images sous forme de data URI. Les navigateurs le proposent directement — « Enregistrer sous → Page web, complète » dans Firefox, ou « Enregistrer au format MHTML » — et une page enregistrée en un seul fichier se convertit fidèlement.

C'est le CSS d'impression qui gouverne réellement le résultat, et c'est la deuxième chose à savoir. La page est mise en page comme pour une impression : un bloc @media print s'applique, alors qu'une feuille de style écran ordinaire peut ne pas s'appliquer — c'est pourquoi une page dotée d'une règle d'impression qui masque sa navigation se convertit à merveille, tandis qu'une page sans cette règle embarque tout l'habillage du site. @page contrôle le papier : le format, l'orientation et les marges y sont lus. break-before, break-after et break-inside: avoid décident où les pages se coupent : un tableau qui ne doit pas être scindé ou une section qui doit commencer sur une nouvelle page sont entièrement sous votre contrôle.

Les arrière-plans sont l'oubli classique. Par défaut, les navigateurs n'impriment ni les couleurs ni les images d'arrière-plan : un en-tête sombre peut donc sortir en blanc, sauf si la feuille de style indique -webkit-print-color-adjust: exact — une seule ligne, qui fait toute la différence entre un document aux couleurs de votre marque et un document nu. Le texte reste du vrai texte, les liens restent des liens fonctionnels, et les titres peuvent devenir des signets PDF quand le balisage utilise de vrais éléments de titre.

Si notre serveur est injoignable, la page vous le dit et reconstruit le document localement, en conservant le texte, les images et une mise en page simple, mais en simplifiant tout ce qui exige un vrai moteur de mise en page — grid, flexbox, flottants et positionnement, entre autres. Un document simple se convertit presque à l'identique ; un document très travaillé, non.

Si vous cherchez autre chose

Pour convertir une URL en ligne — ce que cette page ne peut délibérément pas faire —, le même moteur de rendu que celui de notre serveur tourne aussi chez vous : chrome --headless --disable-gpu --print-to-pdf=out.pdf https://example.com charge la page avec son accès réseau, scripts compris. C'est toute la différence, et c'est la raison d'y recourir.

Pour un vrai contrôle des en-têtes, pieds de page, numéros de page et marges, WeasyPrint et Prince implémentent correctement la spécification CSS Paged Media : en-têtes courants via @top-center, compteurs de pages, notes de bas de page et renvois résolus en numéros de page. WeasyPrint est gratuit et c'est ce qu'utilisent la plupart des chaînes de production de documentation. Chrome ne prend en charge presque rien de tout cela : un rapport généré avec « Page 3 sur 12 » en pied de page a besoin de l'un d'eux plutôt que de cet outil.