Javascript/CSS page print preview

March 5, 2010

I looked around for a simple example of creating a print preview button/link on a webpage. I already had a print.css which handled the printing but my users could not seem to find the print and print preview links on their browsers. Sigh.

So I took what I could find and came up with the following method of doing this.

So here is what I did:
First I added this little javascript function to the application javascript library. You could just as easily add it to the page header.

function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1
        && a.getAttribute("title")) {
       a.disabled = true;
       if(a.getAttribute("title") == title) a.disabled = false;
     }
   }
}

In the website header used on all pages I put a link to three different stylesheets.

<link href=”default.css” media=”all” rel=”stylesheet” type=”text/css” title=”default” />
<link href=”print-preview.css” media=”all” rel=”alternate stylesheet” type=”text/css” title=”printcss” />
<link href=”print-preview.css” media=”print” rel=”stylesheet” type=”text/css” />

The first link is the default style sheet. The last link is to the print style sheet and the middle link is to an alternate screen stylesheet. In all three style sheets I have a class called print-preview. In both the default style sheet and the print style sheet the class definition looks like this:

.print-preview {
  display: none;
}

The print-preview style sheet is identical to the print style sheet except the display on the .print-preview is set to block so it will display.

Again in the common header just after the beginning element I added:

<div class='print-preview'>
<a href='#' onclick="javascript: window.print();setActiveStyleSheet('default');">
<img src='/images/print.png' /></a>
<a href='#' onclick="javascript: setActiveStyleSheet('default');"></a>
<img src='/images/arrow-previous.png" /></a>
<hr /></div>

This displays a header on the print preview page that has a printer icon and a back button. Since the display is set to none on both the normal css and the print css it only displays in print-preview view.

Now on the page I just add a link to Print Preview like this:

<a href="#" onclick="javascript:setActiveStyleSheet('print-preview');">Print Preview</a>

It all works like this:
When a user clicks the Print Preview link the active style sheet is changed to the alternate print-preview style sheet so the page looks just like it would printed with the addition of the printer icon and back icon at the top.
If the user presses the printer icon, window.print() is called so the print dialog is displayed. Then the default style sheet is restored, so the page reverts to the normal display. If the user presses the back icon, the default style sheet is restored so the normal display is restored.

Since the print style sheet is used for all printing, if the user uses the print preview link on the page or chooses print from the browser menus, then the same thing is printed out.