Print Button

You can easily add a print button or link to your web page. To add a button use the following code:

<form><input type="button" value=" Print this page "
onclick="window.print();return false;" /></form>

The button looks like this:

To add a link you code it like this:

<a href="#" onclick="window.print();return false;">print</a>

The link looks like this: print

You can also easily control what parts of your page print out by adding a special stylesheet that will be used for printing to the head section of your page like this:

<link rel="stylesheet" href="print.css"
type="text/css" media="print"/>

The print.css file should contain the following:

body {visibility:hidden;}
.print {visibility:visible;}

Now all you need to do is to assign class="print" to whatever parts of your web page that you want to have print out. Anything on the page not assigned to this class will not print.

Try printing this page to see how it works.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow