Click here to Skip to main content
15,434,755 members
Articles / General Programming / Printing
Posted 11 Oct 2013

Tagged as


2 bookmarked

Printer Friendly Page

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
11 Oct 2013CPOL2 min read
Today my topic is regarding the Printer Friendly Web Page in which I will share the best practice how to build the Printer Friendly page.The reason

This articles was originally at but has now been given a new home on CodeProject. Editing rights for this article has been set at Bronze or above, so please go in and edit and update this article to keep it fresh and relevant.

Today my topic is regarding the Printer Friendly Web Page in which I will share the best practice how to build the Printer Friendly page.

The reason we need to have printer friendly pages because our normal pages are more complex with images, background, image text in different colors, menu and links all over the place.

Before you start the Printer Friendly Page you need to remember few rules that are:

• Set the default page size like A4 etc and mention the page size at the footer of the page.
• The page should be very neat and clean meaning no background and no foreground color, make is Simple Black & While.
• Use True type fonts like Times new roman, Arial, Courier New etc.
• Use Header and Footer.
• Use appropriate Image (Company Logo) in the header area and in the body use if required.
• Preferred to use image in the gif format.
• Do not use link if you need mention with location like File  Option  Save or specify the URL path.
• Add the Link Tag under the HEAD tag.

Now if you go through the above points it’s time to build the logic.

1st Logic:

Use the div tag to separate the data, menu and page banner, if you have simple pages. and you can hide through CSS. Suppose you put the page menu in the div tag id=menu so on printer friendly page you can hide the menu using div#menu{display:none}.

2nd Logic:

Handle it through the small piece of code. Place your all printable data in the div tag and print friendly page click you can call the function which will read the div tag area and open in other window.

Here is the sample:

JavaScript code:

function pagePrint()
var divMyArea = document.getElementById( ‘divArea’ );
if( divMyArea.innerHTML != ” ) ”,” ).document.write( divMyArea.innerHTML + ‘<input type=button onclick="window.print();" value=Print>‘ );

Note: If you want to print the page with using the printer friendly page, Browser will print the background by default you have to manually set the browser property from Tools->Option->Advanced->under Printer category check the “Print background colors and images” option.
This article was originally posted at


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
United States United States
The ASP.NET Wiki was started by Scott Hanselman in February of 2008. The idea is that folks spend a lot of time trolling the blogs, googlinglive-searching for answers to common "How To" questions. There's piles of fantastic community-created and MSFT-created content out there, but if it's not found by a search engine and the right combination of keywords, it's often lost.

The ASP.NET Wiki articles moved to CodeProject in October 2013 and will live on, loved, protected and updated by the community.
This is a Collaborative Group

757 members

Comments and Discussions

-- There are no messages in this forum --