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:
<form>
<input type="button" value="Print this page" onClick="window.print()">
</form>
 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>
|
