Home>Printing               Money to build your web site!


Java Script Print

List of totally free Web Site Host Services from our partners:

Creating user defined print buttons

Up until JavaScript1.2, printing a document means reaching out to the print button on the toolbar of your browser. That works fine, but wouldn't it be nice if webmasters could create their own print buttons? When NS2.x was introduced, wemasters finally were allowed to use their own image or text links to replace that ugly submit button. Now, with NS4.x, the same idea applies to the print button too.

Basic syntax to print a document:

The JavaScript syntax used to simulate the print button currently only works with NS4.x, so other browser users, please feel free to read the below, but you'll still need NS4.x to do the test run.

Here's the syntax used to print a document:

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

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

If you're using NS4.x, clicking the above button will print this page.

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

____________________________________________________________

Bookmark this page with Blink