le MEMO du WEB développeur
 

••• Astuces de programmation •••   Liste des Mémos, astuces et bonnes pratiques

Garder une variable de session après fermeture du navigateur - PHP

Créer un bouton imprimer sur sa page web - Javascript

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 :

Empêcher de coller du texte dans un champs input de type text - JQuery
Retrouver les coordonnées latitude longitude d'un endroit avec Google Map - Divers
Ajouter un masque de saisie dans un champs input text - JQuery
Une image de background aléatoire - CSS
Empêcher l'autocomplétion dans les formulaires - HTML
Une liste d'articles au hasard dans Wordpress - Wordpress
DatePicker de JQuery : Déployer le calendrier à l'ouverture de la page - JQuery
Apparition d'un élément en fondu avec JQuery sur le survol de souris - JQuery
Détecter un click à l'extérieur d'un élément avec JQuery - JQuery
Afficher une image différente selon la date de l'année en javascript - JQuery
Atteindre une ancre avec JQuery - JQuery
Détecter lorsqu'on appuie sur la touche entrée en JQuery - JQuery
Comment ne pas interpréter une commande HTML à l'affichage - HTML
Padding et margin en hauteur ne fonctionnement pas sur éléments inline - HTML
Revenir à la page précédente du navigateur - HTML
Trouver le chemin canonique absolu d'un répertoire - HTML
Faire appel à un fichier CSS à l'intérieur d'un autre fichier CSS - CSS
Faire clignoter un élément avec JQuery - JQuery
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