Pourquoi la version PDF de la page diffère-t-elle de ce que je vois à l'écran ?

Parce que la plupart des sites web définissent des styles distincts pour l'écran et pour l'impression. Les règles CSS @media print entrent en jeu et masquent des éléments comme les menus, les barres latérales et les publicités, tandis que les couleurs se simplifient. C'est généralement souhaitable — la sortie est plus propre — mais du contenu important peut parfois être masqué aussi. Par ailleurs, les designs responsives, qui varient selon la largeur d'écran, basculent vers une autre mise en page à la largeur d'une page PDF.

Puis-je transformer en PDF des pages nécessitant une connexion ?

Généralement non. Un outil qui convertit une URL accède seul à cette adresse et ne transporte pas vos informations de session. Sur les pages nécessitant une connexion, l'outil produit le PDF d'un écran de connexion ou d'une page d'erreur. Pour ces pages, il faut utiliser l'option « Imprimer au format PDF » de votre navigateur, alors que votre session est ouverte.

Pourquoi les couleurs et images d'arrière-plan n'apparaissent-elles pas ?

Les moteurs d'impression n'impriment pas les graphiques d'arrière-plan par défaut — c'est un comportement intégré destiné à économiser l'encre. La boîte de dialogue d'impression du navigateur comporte une option « Graphiques d'arrière-plan » qu'il faut activer. Les outils de conversion peuvent proposer un réglage analogue. Sur les designs à fond sombre, si ce réglage est désactivé, le texte peut devenir illisible.

Comment une longue page est-elle découpée dans le PDF ?

Elle est découpée en tranches de la hauteur d'une page, et le point de coupe peut tomber au milieu du contenu — un tableau peut être scindé, une image coupée en deux. Des règles CSS comme page-break-inside: avoid permettent de contrôler cela, mais elles doivent être définies dans le code de la page elle-même. Si vous convertissez votre propre HTML, vous pouvez ajouter ces règles.

Comment convertir une page web en PDF ? Conversion d'URL et de HTML

Vous voulez archiver une page web, enregistrer un article pour le lire hors ligne, conserver une commande comme document ou produire un rapport depuis votre propre HTML. La conversion de HTML en PDF répond à ces besoins, mais la nature des pages web réserve quelques surprises.

Deux usages différents

La conversion d'URL : vous fournissez une adresse web, l'outil charge la page et produit un PDF. On l'emploie pour archiver et enregistrer.

La conversion de code HTML : vous fournissez le HTML que vous avez préparé. On l'emploie pour produire de façon programmatique des documents comme des factures, des rapports ou des certificats.

Les deux utilisent le même moteur mais vous rencontrez des problèmes différents.

Étape 1 : vérifiez que la page est convertible

Si vous convertissez une URL, certaines pages posent problème :

Les pages nécessitant une connexion. L'outil accède seul à cette adresse et ne transporte pas vos informations de session. Le résultat est le PDF d'un écran de connexion ou d'une page d'erreur. Pour ces pages, il faut utiliser « Imprimer au format PDF » dans votre navigateur, session ouverte.

Le contenu derrière un péage. Même problème.

Le contenu chargé en JavaScript. Certains sites chargent leur contenu après l'ouverture de la page, via des requêtes distinctes. Si l'outil produit le PDF avant le chargement, vous obtenez une page vide ou incomplète. Les bons outils attendent le chargement de la page, mais sur les pages à défilement infini, le contenu intégral ne peut jamais être obtenu.

Les sites qui bloquent les robots. Certains sites empêchent l'accès automatisé.

Les bandeaux de cookies et les fenêtres surgissantes. Ils se retrouvent dans le PDF et peuvent masquer une partie du contenu.

Étape 2 : comprenez les feuilles d'impression

C'est ce qui surprend le plus.

La plupart des sites web définissent deux jeux de styles distincts en CSS :

/* Pour l'ecran */
nav { display: block; }

/* Pour l'impression */
@media print {
  nav, .sidebar, .ads { display: none; }
  body { font-size: 12pt; color: #000; }
}

La production du PDF utilise les styles d'impression. C'est généralement une bonne chose :

Les menus, barres latérales et publicités sont masqués.
Les couleurs se simplifient, le texte devient plus lisible.
Une mise en page adaptée à la largeur de page est appliquée.

Mais cela produit parfois des résultats indésirables :

Un encadré d'information important peut être masqué.
L'identité visuelle du site est perdue.
Certains sites n'ont pas défini de feuille d'impression et la mise en page ressort cassée.

Le design responsive entre en outre en jeu : si la page change de disposition selon la largeur d'écran, la largeur de page du PDF (environ 794 pixels pour un A4) peut déclencher la mise en page mobile. Le résultat est une disposition différente de celle que vous voyez sur ordinateur.

Étape 3 : fixez les réglages de page

À régler avant la conversion :

La taille de page. L'A4 est la norme en Europe ; le Letter s'utilise en Amérique. Si le document doit être imprimé, choisissez le format adapté à la région cible.

L'orientation. Le portrait est la norme. Le paysage peut donner un meilleur résultat pour les pages contenant de larges tableaux ou des graphiques horizontaux.

Les marges. La valeur par défaut est généralement de 1 à 2 cm. Les réduire à zéro pousse le contenu jusqu'au bord, mais les imprimantes ne peuvent pas imprimer sur une bande d'environ 5 mm en bordure — si le document doit être imprimé, laissez de la marge.

La mise à l'échelle. Si la page est très large, une réduction peut être appliquée. Mais une réduction excessive rend le texte illisible ; les valeurs descendant sous 70 % sont généralement problématiques.

Les graphiques d'arrière-plan. Ils sont désactivés par défaut — un comportement intégré destiné à économiser l'encre. Sur les designs à fond sombre, si ce réglage est désactivé, le texte peut devenir illisible (du texte blanc sur fond noir devient blanc sur blanc dès que le fond n'est pas imprimé). Il peut être nécessaire de l'activer.

En-têtes et pieds de page. À l'impression depuis un navigateur, le titre de la page, l'URL et la date sont ajoutés automatiquement. Utile pour l'archivage, indésirable pour un document propre.

Étape 4 : convertissez

Ouvrez l'outil de conversion de HTML en PDF, saisissez l'URL ou collez votre code HTML, définissez les réglages et lancez la conversion.

Pendant l'opération, l'outil charge la page, applique les styles, calcule la mise en page et la découpe en pages.

Étape 5 : contrôlez le résultat

Le contenu est-il complet ? Les sections chargées en JavaScript sont-elles bien arrivées ?

Les sauts de page sont-ils cohérents ? Un tableau est-il coupé en deux ? Un titre est-il resté seul en bas de page ? Une image est-elle tronquée ?

Les liens fonctionnent-ils ? Les bons convertisseurs transforment les hyperliens en liens PDF. Testez-en quelques-uns.

Le texte est-il sélectionnable ? Le texte est-il arrivé comme véritable texte, ou la page a-t-elle été convertie en image ? Un texte sélectionnable a bien plus de valeur, car il est consultable et copiable.

Les caractères accentués sont-ils corrects ? Contrôlez les é, è, à, ç, ù, œ.

Les couleurs et les arrière-plans. Le rendu est-il conforme à vos attentes ?

Le nombre de pages est-il raisonnable ? S'il est étonnamment élevé, la page peut contenir du contenu masqué ou répété.

Si vous convertissez votre propre HTML

Si vous produisez des documents comme des factures, des rapports ou des certificats depuis du HTML, vous maîtrisez entièrement la mise en page. Les règles CSS que vous pouvez employer :

Taille de page et marges :

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

Contrôle des sauts de page :

/* Que cet element ne soit pas coupe en deux */
table, figure { page-break-inside: avoid; }

/* Qu'une nouvelle page commence avant cet element */
h1 { page-break-before: always; }

/* Pas de saut de page juste apres un titre */
h2 { page-break-after: avoid; }

Contrôle des lignes orphelines et veuves :

p {
  orphans: 3;  /* au moins 3 lignes en bas de page */
  widows: 3;   /* au moins 3 lignes en haut de page */
}

Afficher les adresses des liens :

@media print {
  a[href]::after { content: " (" attr(href) ")"; }
}

Cela rend visible, dans un document imprimé, la destination des liens.

Le choix des polices. Les polices web (comme Google Fonts) sont chargées depuis des sources externes. Si l'environnement de conversion n'y a pas accès, la police n'est pas chargée et la mise en page se décale. Pour les documents importants, intégrer la police ou utiliser des polices système est plus sûr.

Problèmes fréquents

| Problème | Cause | Solution | |---|---|---| | La page ressort vide | Le contenu JavaScript n'a pas été chargé | Réglage de temps d'attente ou impression depuis le navigateur | | Pas d'arrière-plans | Réglage par défaut | Activez l'option Graphiques d'arrière-plan | | Les menus et publicités sont présents | Pas de feuille d'impression définie | Imprimez depuis le navigateur en mode lecture | | Mise en page en version mobile | Le design responsive s'est déclenché | Augmentez la largeur de page ou passez en paysage | | Tableau coupé en deux | Pas de contrôle des sauts de page | Ajoutez la règle CSS s'il s'agit de votre HTML | | Police différente | La police web n'a pas été chargée | Utilisez une police système | | Liens non cliquables | Limite du convertisseur | Essayez une autre méthode | | C'est la page de connexion qui ressort | La session n'est pas transportée | Imprimez depuis le navigateur |

Alternative : l'impression depuis le navigateur

Dans certains cas, la fonction « Imprimer au format PDF » de votre navigateur donne un meilleur résultat :

Les pages nécessitant une session. Vous y êtes déjà connecté.

Les pages riches en JavaScript. Le contenu est déjà chargé.

Le contenu personnalisé. Votre panier, votre compte, vos réglages.

Le prix à payer est que le navigateur applique ses propres réglages de page et ajoute généralement des en-têtes et pieds de page. Vous pouvez corriger ces réglages dans la boîte de dialogue d'impression.

La fonction « mode lecture » de certains navigateurs est également utile : elle débarrasse la page de ses menus et publicités pour ne montrer que le texte de l'article. Produire un PDF dans ce mode donne un résultat bien plus propre.

En résumé

La conversion de HTML en PDF produit, en utilisant les feuilles d'impression de la page web, un document découpé en pages fixes. Il est normal que le résultat diffère de ce que vous voyez à l'écran — les menus sont masqués, les couleurs se simplifient, le design responsive peut basculer vers une autre mise en page. Les graphiques d'arrière-plan ne s'impriment pas par défaut et il peut être nécessaire d'activer ce réglage sur les designs à fond sombre. Pour les pages nécessitant une connexion et celles chargées en JavaScript, la fonction d'impression du navigateur est plus fiable. Et si vous convertissez votre propre HTML, vous pouvez contrôler les sauts de page avec des règles CSS comme @page, page-break-inside et orphans/widows, et obtenir une sortie professionnelle.