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 document:


Really simple, right? Right. That's all there is to it. Lets see a basic example that uses a button to print a document:

<input type="button" value="Print this page" onClick="window.print()">

Using images as print buttons

Just like you can use custom 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 cancels the default action, which is to link to "whatever.htm". By cancelling the default action, the image above becomes exclusively a button that prints a document, which is what we want in this case. (Note: there is another similar way to achieve the same thing, which is to create a false (non existence) anchor link, and taking out the return false part.)

2nd method: Using a "JavaScript url" in an image link:

Another way to accomplish the exact same task as above is to use a "JavaScript url". A JavaScript url is a special kind of url that executes a command, instead of loading the specified url. Lets see an example of such 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 place of the target link! The syntax for all JavaScript urls are the same:

javascript:script codes here

Any JavaScript code can be inserted inside to carry out an action when a link is clicked, thus the name, JavaScript url! For example, the below will pop up an alert box when the link is clicked:

Click here

<a href="javascript:alert('hi there!')">Click here</a>