Create a print button and use JavaScript to manipulate the output

Okay, this is a nice short tutorial that will show you

how to create a print button on a web page
use Firebug (Firefox), Developer Tools(IE) or any other developer tools available to identify what controls needs to be hidden or showed before the page gets printed
show you what code is needed for jQuery or Dojo

1. How to create a print button on a web page.
First of you need to create a print button. Now normally when I create an image as a button on a web page I will use CSS for the style and a <div> for the button.

Okay so first add a

tag to your page and give it a class name, for this example I will be using “printButton” as the class name. PS. You can also use an ID for the div which will only change the way you call the div.
Create your html file and add this div to the file.

<body>
<div>
</div>
</body>

So now that you have your div you need to create the StyleSheet that will style our print button. Add a CSS file to your project and add the following to it. The dot before printButton means that this style is applicable to the printButton Class. If the printButton had a # before it would look for the ID.

.printButton
{
background-image: url("printButton.jpg");
background-repeat: no-repeat;
cursor: pointer;
cursor: hand;
height: 20px;
width: 20px;
padding: 5px;
}

This style will change your div however you want it. The first two lines will show your image without repeating it. Then we use two cursors, the first one works for IE and the second for Firefox (this is the code that will show the little hand when you hover over the image). Then we set the fixed width of the div and the padding to make it look a bit nicer.

So this is how the button should look by now. Now to create an actual print button we need to add the JavaScript print command. Add the following to your printButton div.

javascript:printDocument();”>

The onclick event fires a JavaScript function called printDocument(). Inside this function we call a JavaScript function that calls the browsers print class. This will print the document but not always as the user would want it to print.

2. Use Firebug to enhanced the nor window.print JavaScript function

For now I’m not going to go into depth of how firebug works but I will post on how to use it and all about what I know of firebug in one of my future posts.

Use Firebug and look through the website that you want to print and identify what controls you want to hide before printing, or what controls you want to modify in size before printing.

If you have a layout that looks like this, it is likely that you only want the content part of this layout. So identify the controls by ID or by class and write them down.

The sides that we will want to hide are: LeftSide, Header, Footer and RightSide.

3. jQuery and Dojo code

Okay so now that you know what controls you don’t want you need to hide them before calling the printing function and show them again after printing.

In the printDocument function add the following code for jQuery:

jQuery(".LeftSide").hide();
jQuery(".Header").hide();
jQuery(".Footer").hide();
jQuery(".RightSide").hide();
window.print();
jQuery(".LeftSide").show();
jQuery(".Header").show();
jQuery(".Footer").show();
jQuery(".RightSide").show();

And this for Dojo:

dojo.query(".LeftSide").style("display", "none");
dojo.query(".Header").style("display", "none");
dojo.query(".Footer").style("display", "none");
dojo.query(".RightSide").style("display", "none");
window.print();
dojo.query(".LeftSide").style("display", "block");
dojo.query(".Header").style("display", "block");
dojo.query(".Footer").style("display", "block");
dojo.query(".RightSide").style("display", "block");

I assume that all the identified controls will be called on their class names. If you need to call some of the controls on the ID you can change the jQuery to “#Header” and the dojo you need to remover the string with the dot and add dojo.byId(“Header”) instead.

You can manipulate the page as you like, just return everything back to normal after the user has printed or redirect them to a new page.

Hope you enjoyed this tutorial.

Create a print button and use JavaScript to manipulate the output

2 Comments