le MEMO du WEB développeur
••• Javascript •••  Liste des Mémos, astuces et bonnes pratiques

Créer un bouton imprimer sur sa page web

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;
}

 

publié le 02/08/2013 par Memo Web
Astuce
Commentaire :
Merci beaucoup c assez simple
par inconnu, le 02/02/2017
Merci infinimment
par inconnu, le 22/10/2015
excellent merci
par inconnu, le 23/09/2015
je vous remrcie tr� claire explication
par inconnu, le 10/06/2015
Superbe merci
par inconnu, le 19/05/2015
merci
par inconnu, le 31/03/2015
vous �tre le best
par inconnu, le 27/03/2015
merci mais je veux savoir comment imprimer un document .pdf et non une page
merci d'avance
par inconnu, le 20/03/2015
Super! Merci!
par inconnu, le 06/02/2015
Ca passe merci continuez de nous venir en aide comme ca
par inconnu, le 23/01/2015
une réponse, on ne peut plus claire !!! mille merci.
par inconnu, le 15/01/2015
Merci beaucoup :)
par inconnu, le 04/12/2014
Merci j'en avais besoins
par inconnu, le 13/10/2014
mecir pour ce tuto c'est bon ça ;)
par inconnu, le 08/06/2014
Merci pour l'astuce !
par inconnu, le 04/06/2014
Merci pour votre aide !
par inconnu, le 14/04/2014
Exacte, pour ne pas afficher ce bouton lors de l'impression, il faut créer une feuille de style spéciale et appliquer la propriété display:none au bouton.
Je rajoute le code dans le mémo.
par tarabusk, le 12/12/2013
c bien mais le bouton "imprimer cette page" va apparaitre sur la feuille imprimée
par inconnu, le 11/12/2013
Commenter le Mémo :

Parcourir les classes d'un élément HTML en JavaScript
Afficher un message avant de quitter une page
Format e-mail et téléphone portable
Empêcher le clic droit sur les images de votre site
Fonction Javascript pour récupérer la valeur d'un cookie
La fonction isNaN ou comment vérifier qu'une variable est un nombre
Replace() ou Remplacer une chaîne de caractères par une autre en Javascript
Vérifier la validité d'une URL en Javascript - Expression régulière
Typer ses variables en javascript
Ouvrir une fenêtre popup sur lien HTML
Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos