web-dev-qa-db-fra.com

Comment ajouter un bouton d'impression à une page Web

Sur l'une de mes pages de mon site Web (codée en php), j'essaie d'ajouter 2 boutons (voire plus) d'impression, chacun imprimant une partie de la page Web. Par exemple, sur une page, il y a un tableau avec quelques valeurs et 2 graphiques en dessous. Je voudrais ajouter 2 boutons d’impression, un bouton imprimant le tableau et l’autre imprimant les deux graphiques. J'ai trouvé ceci Exemple mais je ne pouvais pas comprendre clairement. Toute aide ou exemple m'aiderait.

Merci d'avance.

phpcss
6
Anil

Une idée simple est de créer certaines règles d’impression css antérieures ad hoc, par exemple.

.printtable * { display : none; }
.printtable table { display : block; }

et

.printtableandgraph * { display : none; }
.printtableandgraph img { display : block; }

alors les deux boutons devraient ajouter un .printtable et une classe .printtableandgraph pour l'élément body (ou un autre élément contenant votre table et vos graphiques) juste avant l'instruction window.print() 

(si l'utilisateur clique deux fois ou plus sur le même bouton d'impression, vérifie précédemment si l'élément a déjà défini ce nom de classe)

6
fcalderan

C'est le code html/javascript qui ouvrira la boîte de dialogue Imprimer du navigateur lorsque l'utilisateur cliquera dessus.

<button onClick="window.print()">Print this page</button>
14
Ed Manet

Si votre table est dans une utilisation de div avec id = 'printTable':

<a href="#null" onclick="printContent('printTable')">Click to print table</a>

EDIT: Voici la fonction "printContent ()"

<script type="text/javascript">
<!--
function printContent(id){
str=document.getElementById(id).innerHTML
newwin=window.open('','printwin','left=100,top=100,width=400,height=400')
newwin.document.write('<HTML>\n<HEAD>\n')
newwin.document.write('<TITLE>Print Page</TITLE>\n')
newwin.document.write('<script>\n')
newwin.document.write('function chkstate(){\n')
newwin.document.write('if(document.readyState=="complete"){\n')
newwin.document.write('window.close()\n')
newwin.document.write('}\n')
newwin.document.write('else{\n')
newwin.document.write('setTimeout("chkstate()",2000)\n')
newwin.document.write('}\n')
newwin.document.write('}\n')
newwin.document.write('function print_win(){\n')
newwin.document.write('window.print();\n')
newwin.document.write('chkstate();\n')
newwin.document.write('}\n')
newwin.document.write('<\/script>\n')
newwin.document.write('</HEAD>\n')
newwin.document.write('<BODY onload="print_win()">\n')
newwin.document.write(str)
newwin.document.write('</BODY>\n')
newwin.document.write('</HTML>\n')
newwin.document.close()
}
//-->
</script>
7
wbcrimson

Bouton d'impression

<button onClick="window.print()">Print this page</button>`

Utilisez ce code pour imprimer n'importe quelle page Web, il n'y a qu'un seul retrait de son impression tous les boutons et la barre de menus.

1
Piyush Tiwari

Pour imprimer une partie de la page, vous pouvez utiliser print.css et le bouton Imprimer pour une approche simple et rapide.

  1. Configurez le fichier print.css et incluez: 

     body {visibility:hidden;}
     .print {visibility:visible;}

  1. Ajoutez la classe .print aux portions appropriées de votre page.

  2. Bouton Ajouter: 

<button onClick="window.print()">Print this page »</button>

Les résultats d'impression sont nets et propres.

0
Trusty Scout