All geek questions in one place

How to add a print button to a web page

On one of my pages on my website (php encoded), I am trying to add two (even more) print buttons, each of which prints a portion of the web page. For example, there is a table on the page with some values ​​and 2 graphs below it. I would like to add 2 print buttons, one button that prints the table, and the other - print both graphs. I found this example , but could not understand clearly. Any help or examples will help me.

Thanks in advance.

+6
source share
4 answers

A simple idea is to create some previous css ad hoc print rules, for example.

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

and

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

then the two buttons should add the .printtable and .printtableandgraph for the body element (or another element containing your table and graphs) immediately before the window.print() statement

(if the user double-clicks twice on the same button of the print button, if the element has already set this class name)

+6
source

This is the html / javascript code that will launch the browser print dialog when clicked.

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

If your table is inside a div with id = 'printTable', use:

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

EDIT: here is the function "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
source

Print button

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

Use this code to print any web page, there is only one fingerprint that printed all the buttons and the menu bar.

+1
source

Source: https://habr.com/ru/post/921219/

More articles:


All Articles