How to add a print button to a web page

This is html/javascript code that will launch the browser's Print dialog when clicked.

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

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>

A simple idea is to create some previous css printing rules ad hoc, e.g.

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

and

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

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

(if user click twice or more on the same print button check previously if the element has already set that class name)

Tags:

Css

Php

Recent Posts