12/15/2010

Using window.print() to print a document

Search JavaScript Kit

Cate gories: All Free JavaScripts/ Applets Tutorials

Submit
Reference s

Using window.print() to print a document

The JavaScript syntax used to simulate the print button currently only works in all modern browsers, so it can be a valid substitute inside a browser window where the toolbars are disabled. Here's the syntax used to print a doc ument: window.print() Really simple, right? Right. That's all there is to it. Lets see a basic example that uses a button to print a doc ument: Print this page <form> <input type="button" value="Print this page" onClick="window.print()"> </form>

Using images as print buttons

Just like you can use c ustom images in place of submit/reset buttons, the same can be done with print buttons. There are two ways to go about creating image print buttons: 1st method: Using "return false" in an image link:

<a href="whatever.htm" onClick="window.print();return false"><img src="print.gif"></a> Return false canc els the default ac tion, whic h is to link to "whatever.htm". By c anc elling the default ac tion, the image above bec omes exc lusively a button that prints a document, which is what we want in this c ase. (Note: there is another similar way to ac hieve the same thing, whic h is to create a false (non existenc e) anc hor link, and taking out the return false part.) 2nd method: Using a "JavaScript url" in an image link: Another way to ac complish the exac t same task as above is to use a "JavaSc ript url". A JavaSc ript url is a spec ial kind of url that exec utes a c ommand, instead of loading the specified url. Lets see an example of suc h before explaining what exactly it is:

<a href="javascript:window.print()"><img src="print.gif"></a> The part in red is a JavaScript method, but look at where it is inserted-in plac e of the target link! The syntax for all JavaScript urls are the same: javascript:script codes here Any JavaScript c ode c an be inserted inside to carry out an ac tion when a link is clic ked, thus the name, JavaScript url! For example, the below will pop up an alert box when the link is clic ked: Clic k here <a href="javascript:alert('hi there!')">Click here</a>
javascriptkit.com/howto/newtech2.shtml 1/2

12/15/2010

Using window.print() to print a document

Copyright 1997-2010 JavaScript Kit. NO PART may be reproduced w ithout author's permission.

javascriptkit.com/howto/newtech2.shtml

2/2