Selon le public cible de votre application web, il se peut que vos utilisateurs demandent régulièrement à imprimer une ou plusieurs de vos pages.

Prenez le site des impôts par exemple, beaucoup d'utilisateurs vont vouloir imprimer leur page de reçu de paiement !

Nous allons découvrir aujourd'hui plusieurs astuces pour améliorer l'expérience lors de l'impression papier sur votre site :

Déclencher l'impression

Au lieu de laisser l'utilisateur chercher dans les options de son navigateur la fonctionnalité d'impression, il vous est possible d'intégrer vous-même un bouton dans votre application pour déclencher l'impression avec la fonction native suivante :

window.print();

Note : en faisant cela vous déclencherez la fenêtre d'impression native du navigateur, mais pas l'impression directement.

Afficher les images/couleurs de fonds

Il se peut que vous découvriez que la page ne s'affiche pas correctement lors de l'aperçu avant impression, cela est dû au fait que pour économiser de l'encre, le navigateur cache automatiquement les images et certaines couleurs de fond.

Si vous utilisez la méthode du background-image pour le positionnement de certaines images, alors ces dernières ne s'afficheront pas, à moins d'ajouter les deux propriétés suivantes dans votre css :

* {
  color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

Modifier le style pour l'impression

Selon le design, il y a de fortes chances pour que l'impression papier tel quel ne soit pas très lisible, par exemple à cause des ombres, de certaines couleurs,... ou bien qu'il y ait des éléments qui n'ai aucun intérêts à l'impression (liens, boutons, barre de navigation,...).

Heureusement il existe une media query appelée "print" qui va vous permettre d'ajouter un style particulier pour modifier ou cacher certains éléments, uniquement lors de l'impression !

@media print {
  ...
}

Il existe aussi des évènements Javascript "onbeforeprint" et "onafterprint" qui peuvent être utilisés pour faire les mêmes choses, mais il est conseillé de les utiliser en dernier recours uniquement.

Éviter les sauts de pages

Le rendu de l'impression étant directement lié à une taille spécifique de papier, il se peut que certains de vos éléments graphiques se retrouvent à cheval entre deux pages, faisant alors perdre la cohérence des informations.

Avec la propriété "break-inside" en CSS, vous pouvez indiquer à votre navigateur d'éviter de couper tel ou tel élément graphique en deux, quitte à faire un saut de page prématuré :

.card {
  break-inside: avoid;
}

J'espère que cet article vous aura été utile, et à bientôt sur le blog !

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !

Photo par Museums Victoria sur Unsplash