Même si les navigateurs présentent une commande pour imprimer la page, le fait d’ajouter une bouton Imprimer sur votre page, peut faciliter l’expérience utilisateur.

Code HTML :

<form>
  <input id="impression" name="impression" type="button" onclick="imprimer_page()" value="Imprimer cette page" />
</form>

Fonction d’impression de page en javascript avec window.print()

Code Javascript

<script type="text/javascript">
function imprimer_page(){
  window.print();
}
</script>

En appuyant sur le bouton, on fait apparaître la fenêtre de paramétrage de l’impression.

Remarque :
L’action de window.print() est différente de l’impression à l’aide du raccourci clavier Crtl+P qui lui lance l’impression directement sans passer par la fenêtre de paramétrage.

Ne pas afficher un élément lors de l’impression

Comme me l’a fait justement remarquer un internaute, ce bouton s’affichera sur la page imprimée, pour éviter cette faute de goût, il faut créer une feuille de style dédiée à l’impression.

A l’intérieur de votre base <head> déclarez votre nouvelle feuille de style qui ne sera appelée que pour l’impression :

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Dans cette feuille de style, print.css, vous appliquerez des styles à vos éléments qui ne seront pris en compte qu’à l’impression de votre page. Par exemple dans notre cas, on rend notre bouton invisible.

print.css :

#impression{
  display : none;
}

 

0 réponses

Laisser un commentaire

Participez-vous à la discussion?
N'hésitez pas à contribuer!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.