JavaScript Imprimer



Outils pour webmaster. Trucs et astuces en code HTML et JavaScript : améliorer son site internet

Descriptif : imprimer une page est une fonction relativement simple. Il suffit de cliquer sur l'icône de l'imprimante de votre navigateur ou, par un clic droit, accéder au menu déroulant au bout du pointeur de la souris. Donc, pourquoi une telle page d'explications. La chose n'est pas si simple lorsque vous voulez imprimer une autre page que celle présente à l'écran ou imprimer un seul élément de la page ou encore lorsque vous avez fait en sorte que la navigation dans vos pages se fasse totalement plein écran. De plus, lorsqu'on demande d'imprimer une page, il peut arriver que tout s'imprime : le fond d'écran, les bannières publicitaires, les boutons etc. Il se peut aussi que l'on souhaite imprimer uniquement le contenu d'une boîte de dialogue. Tous les cas d'impression sont donc possible et le confort de l'utilisateur ainsi que sa connaissance plus ou moins grande de la navigation sont à envisager. Là encore quelques codes de JavaScript vous nous aider.
    Nous allons examiner dans les exemples suivants quelles sont les différentes solutions.

Descriptif n°1 : commençont par le plus simple : imprimer une page.

Exemple A : imprimer la page avec un lien : Imprimer cette page.

Entre les deux balises <body> et </body>

<!--DEBUT DU SCRIPT IMPRIMER--> <a href="javascript:window.print()">Imprimer cette page</a> <!-- FIN DU SCRIPT IMPRIMER-->

 

Exemple B : imprimer la page avec un bouton.  

Entre les deux balises <body> et </body>

<!-- DEBUT DU SCRIPT IMPRIMER--> <input type="button" value="Imprimer cette page" onClick="window.print()"> <!-- FIN DU SCRIPT IMPRIMER-->

Exemple C : imprimer la page avec une image : IMPRIMER

Entre les deux balises <body> et </body>

<!-- DEBUT DU SCRIPT IMPRIMER--> <a href="javascript:window.print()"><img src="image.gif"></a> <!-- FIN DU SCRIPT IMPRIMER-->

Exemple D : imprimer une autre page que celle présente à l'écran. Vous souhaitez, par exemple, que le visiteur puisse imprimer un règlement ou des instructions.
    Le lien présent sur cette page va ouvrir un pop-up avec votre texte et qui contiendra l'instruction d'impression en JavaScript. L'utilisateur n'a alors rien d'autre à faire. Si vous le souhaitez, un lien ou un bouton permet au visiteur de choisir de ne pas imprimer cette page.

Imprimer Les Instructions.

Entre les deux balises <body> et </body> de la page où se trouve le texte à imprimer.

<!-- DEBUT DU SCRIPT IMPRIMER--> <script language="javascript"> <!-- window.print()<br> //--> </script> <!-- FIN DU SCRIPT IMPRIMER-->

ou, si vous préférez, dans la ligne de la balise <body>

<!-- DEBUT DU SCRIPT IMPRIMER--> <body onLoad="window.print()"> <!-- FIN DU SCRIPT IMPRIMER-->

Remarque : l'instruction   window.print() est compatible Netscape 4 et plus, Internet Explorer 5 et plus.

Descriptif n°2 : vous allez pouvoir imprimer par un bouton qui va sélectionner automatiquement un texte se trouvant dans une boîte de dialogue. Il vous suffit ensuite de choisir l'option : impression de la sélection dans la boîte de dialogue du panneau d'impression.

Exemple :

Mise en oeuvre : Sélectionnez et copiez directement à l'écran le code ci-dessous et collez-le dans votre page, code HTML visible.

Entre les deux balises <body> et </body>

<!-- DEBUT DU SCRIPT IMPRIMER--> <script language="javascript"> document.write('<table align=center border=0 width=70% bgcolor=yellow>') document.write('<tr align=center><td><form><textarea NAME="txt" ROWS=5 COLS=70 WRAP>') document.write('Cliquez sur le bouton IMPRIMER pour sélectionner ce texte et ouvrir ') document.write('le panneau d\'impression.</textarea><br><font color=red><b>') document.write('</td></tr></table>') document.write('<p align=center>') document.write('<input type=button name=button value="IMPRIMER" ') document.write('onClick="this.form.txt.select(); window.print()"></form>') </script> <!-- FIN DU SCRIPT IMPRIMER-->

Remarque : pour plus de facilité, vous pouvez utiliser le convertisseur de code HTML en JavaScript afin d'écrire toutes les instructions HTML contenues dans document.write().



[ TOP ]


Imprimmer Section avancer

Descriptif n°2 : dans l'exemple suivant nous allons imprimer un seul élément de la page. Ce peut être une image, un tableau, une boîte de dialogue etc.
Pour la mise en oeuvre, il faut préparer la page en mettant devant chaque balise que l'on ne souhaite pas imprimer se trouvant entre <body> et </body> l'identification :  id="remove".

Par exemple :
<p id="remove">suite</p>
<p id="remove"align="left"><strong>suite</strong></p>
<table id="remove">suite</table>

Exemple : imprimer uniquement le code entre <head> et </head>  et l'image du bas : IMPRIMER

Mise en oeuvre : Sélectionnez et copiez directement à l'écran le code ci-dessous et collez-le dans votre page, code HTML visible.

Entre les deux balises <head> et </head>

<!-- DEBUT REMOVE PRINT--> <script language="JavaScript"> function removeelements(){ //store all elements with id=remove to "remove_el" var remove_el=document.all.remove //if there is only one element with id=remove if (remove_el!=''&&remove_el.length==null) remove_el.style.display='none' else{ //for each element with id=remove for (i=0;i<remove_el.length;i++) remove_el[i].style.display='none' } } function revertback(){ setTimeout("window.location.reload()",50) } window.onbeforeprint=removeelements window.onafterprint=revertback </script> <!-- FIN REMOVE PRINT-->

[ TOP ]





Copyright © 2003-2008 Dave J.