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;
}
Laisser un commentaire
Participez-vous à la discussion?N'hésitez pas à contribuer!