====== Script pour imprimer une zone de l'écran ======

Voici un script permettant d'imprimer une zone bien définie avec JavaScript. Pour cela, nous allons créer une popup est copier le contenu de cette zone définie dans ce popup.
Vous trouverez le code JavaScript en lui-même ainsi que la méthode pour l'intégrer dans une page HTML.


===== Le code JavaScript =====

<code javascript>
<script language="javascript">
function imprimer_bloc(titre, objet) {
// Définition de la zone à imprimer
var zone = document.getElementById(objet).innerHTML;
 
// Ouverture du popup
var fen = window.open("", "", "height=500, width=600,toolbar=0, menubar=0, scrollbars=1, resizable=1,status=0, location=0, left=10, top=10");
 
// style du popup
fen.document.body.style.color = '#000000';
fen.document.body.style.backgroundColor = '#FFFFFF';
fen.document.body.style.padding = "20px";
 
// Ajout des données a imprimer
fen.document.title = titre;
fen.document.body.innerHTML += " " + zone + " ";
 
// Impression du popup
fen.window.print();

//Fermeture du popup
fen.window.close();
return true;
}
</script>
</code>

On colle ce code dans la page HTML, avant le </header> si possible.


===== Appel de la fonction JavaScript =====

Maintenant que la fonction est créer nous allons vous expliquer comment l'intégrer dans votre page HTML. 

Pour définir la zone a imprimer, nous allons l'intégrer (l'encapsuler) entre une balise <div> et lui donner un nom (dans notre exemple : imprime_moi).

Avec cette exemple vous pouvez intégrer plusieurs liens (ou boutons) dans une même page, il suffit de changer le nom de chaque zone a imprimer.

<code html>
<div id="imprime_moi">
Ceci est le texte contenu dans la zone a imprimer
</div>

// Lien
<a href="#" onclick="javascript:imprime_bloc('titre', 'imprime_moi');">Cliquez ici pour imprimer la zone</a>
</code>

===== Notes de version =====

  * [18/11/2017] : Harmonisation de la page

===== Auteurs et sources =====

  * Auteur : [[:user:montuy337513]]

===== Navigation =====

  * [[:accueil|Accueil]]
  * [[:gestion-site-internet]]
  * [[:tutoriel-javascript]]
  * [[:tutoriel-html]]
  * [[:tutoriel-php-mysql]]
  * [[:tutoriel-referencement-seo]]

<nspages -h1 -exclude:subNs: -textPages="Autres liens rapides pouvant vous intéresser">