Javascript: Print Ready Page

If you have pages that you think your users might want to print frequently, it is often helpful to provide print-ready version of the pages that do not have the typical elements found in a web page like banners and navigation. The usual way to do this is to create two copies of the page, with the extra items for the print-ready page stripped out. However, this adds extra work and becomes a problem to maintain over time.

Fortunately, with a little scripting and the help of some modern browser features (Internet Explorer version 5 and later; Netscape version 6 and later), it is possible to create a print script that does all the work for you. The script below will automatically open up a new browser window, copy your HTML content to the new window, and call the browser's print command. You can try it out by clicking the print button at the bottom of this article.

Preparing Your Content

The first thing you need to do is to identify the area of your page that you want to be included in the printable version. This is done by creating a DIV tag with a special ID attribute of "printReady". Here is an example:

<div id="printReady">
<p>Hello World! Your Printable Page Content Goes Here</p>
</div>

Now, whatever is in between the DIV tags will be what gets included in the print-ready version of the page.

Adding Script to Your Page

Copy and paste the following into HEAD section of your HTML

function printSpecial()
{
	if (document.getElementById != null)
	{
		var html = '<HTML>\n<HEAD>\n';

if (document.getElementsByTagName != null)
		{
			var headTags = document.getElementsByTagName("head");
			if (headTags.length > 0)
				html += headTags[0].innerHTML;
		}
		
		html += '\n</HE' + 'AD>\n<BODY>\n';
		
		var printReadyElem = document.getElementById("printReady");
		
		if (printReadyElem != null)
		{
				html += printReadyElem.innerHTML;
		}
		else
		{
			alert("Could not find the printReady section in the HTML");
			return;
		}
			
		html += '\n</BO' + 'DY>\n</HT' + 'ML>';
		
		var printWin = window.open("","printSpecial");
		printWin.document.open();
		printWin.document.write(html);
		printWin.document.close();
		if (gAutoPrint)
			printWin.print();
	}
	else
	{
		alert("Sorry, the print ready feature is only available in modern browsers.");
	}
}

</script>

Adding a Print Button to Your Page

Next, you will want to provide a way for the user to get to the printable version of the page. You can choose whether you want to use a plain text link or a button using one of the two styles shown below. Copy the following HTML into your page where you want it to appear.

Text Link:

Print this Page

<a href="javascript:void(printSpecial())">Print this Page</a>

Button:

Free JavaScripts provided
by Winfolinx.com

Back