1. Home
  2. Computing & Technology
  3. JavaScript

Print Button

Join the Discussion

Questions? Comments?

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.

Explore JavaScript
About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  1. Home
  2. Computing & Technology
  3. JavaScript

©2009 About.com, a part of The New York Times Company.

All rights reserved.