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