Dynamically Create Printer Friendly Pages

By Robbe D. Morris

Printer Friendly Version

Robbe Morris
Robbe & Melisa Morris
Here's a little tip to make creating printer friendly versions of your pages relatively easy.  At NullSkull.com, we use a common ASP include for our header and footer sections of the web site.  We recently received a request to make our web pages printer friendly.  Rather than go back through hundreds of pages, we simply placed a DIV tag at the end of the header and a /DIV tag at the beginning of the footer.  I've provided two coding alternatives to enable printer friendly pages.  One for not having a pre-existing print page and one if you have a pre-existing print page.
 
Code Sample 1 of 2
  
 <div id=contentstart> 

Then, on the appropriate pages, we created a link to call the JavaScript 
function below.   

<a href="javascript:PrintThisPage();" >Printer Friendly Version</a> 

By grabbing the div tag's .innerHTML value, we automatically strip out 
all of the header and footer content.   In the example below, we use 
JavaScript to open a new window and send the printer friendly content 
to a new page. 

function PrintThisPage() 
{ 
   var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,"; 
       sOption+="scrollbars=yes,width=750,height=600,left=100,top=25"; 

   var sWinHTML = document.getElementById('contentstart').innerHTML; 
   
   var winprint=window.open("","",sOption); 
       winprint.document.open(); 
       winprint.document.write('<html><LINK href=/eggheadcafe.css rel=Stylesheet><body>'); 
       winprint.document.write(sWinHTML);          
       winprint.document.write('</body></html>'); 
       winprint.document.close(); 
       winprint.focus(); 
}



Code Sample 2 of 2
  

If your web application is going to have problems utilizing the document.write method,
you could also do the following instead:

We'll need to create a real asp page.  I called this print.asp.  Here is the minimum
HTML/JavaScript that would need to go in your print.asp page.  Essentially, we use
this pre-existing print.asp page to "pull" the html out of the parent page and load
it into another div tag in our print.asp page when the onload event in the body fires.

<html>
  <head>
          <script language=JavaScript>
                 function GetPrintContent()
                  {
                        var PrintDiv =  document.getElementById('printcontent');
                        var ContentDiv =  window.opener.document.getElementById('contentstart');
                        PrintDiv.innerHTML = ContentDiv.innerHTML;
                  }
          </script>
     <body onload="GetPrintContent();">
         <div id=printcontent> </div>
     </body>
</html>


In our parent page that holds the content we want to print, we still have our
contentstart div tag.

 <div id=contentstart> 

We still have the link to print the page.

<a href="javascript:PrintThisPage();" >Printer Friendly Version</a> 

 In the example below, we use  JavaScript to open a new window and
 launch our new print.asp.  Notice that we are no longer using document.write
 to send content to a window.  The print.asp page is now pulling that same content.

function PrintThisPage() 
{ 
   var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,"; 
         sOption+="scrollbars=yes,width=750,height=600,left=100,top=25"; 
   
   var winprint=window.open("print.asp","Print",sOption); 
 
    winprint.focus(); 
}


Robbe has been a Microsoft MVP in C# since 2004.  He is also the co-founder of NullSkull.com which provides .NET articles, book reviews, software reviews, and software download and purchase advice.