Click here to Skip to main content
15,867,835 members
Articles / Web Development / HTML
Article

Changing Page Style for Printing

Rate me:
Please Sign up or sign in to vote.
3.19/5 (9 votes)
17 Aug 20062 min read 46.3K   787   36   2
Using a stylesheet to change the page style for printing.

The Problem

Think of a situation in a web application where we need to print a report-page in a user-friendly format using the Internet Explorer print option. That means, we will mostly need to change the styles of the page during printing. How can we achieve this? In this article, I would like to explain how to do this.

Before going to the explanation, we can check out an example… Let's say, I am taking a print of this page:

Image 1

The page has to be changed into this:

Image 2

Did you notice the changes in the web form? This can achieved with the help of a stylesheet.

The Solution

We will see how we can achieve this during printing. For that, we need to do the following:

Step 1

First, we need to create two different stylesheets, one for the default view and another for the printing style.

Step 2

Now, declare the stylesheets in the page header, like:

HTML
<LINK title="MainStyles" href="styles/DefaultStyles.css" 
      type="text/css" rel="stylesheet">
<LINK title="PrintStyles" media="print" 
      href="styles/Print.css" type="text/css" rel="stylesheet">

One important thing we need to notice on this is, on the second link, we need to provide the attribute media="print".

In this case, put two header and footer tables, and give the CSS class name as .print. In the default style page, give display:none; in the class .print, and in the print style class, provide display:inline. For the same class, we are declaring two stylesheets with different definitions. The correct value will be taken automatically from the style depending on the status of the page. This is applied to all the controls.

In the print page style, first we give:

HTML
#SearchDescription, #Cancel, #Buttons, 
      #SearchCriteria,.clsBtnControl{
    display: none;
}

This is for disabling all the unwanted controls during print option. Then, we enable the controls that are not shown in the search option.

HTML
.Print {
    display:inline;
}

We can generalize this header and footer as two separate user controls, so you can use it as a general header and footer in your project. We only set the values to the controls during search.

For the buttons, we do the same thing. I mean, set visibility to false during the print option so we can achieve a user-friendly printed format from the IE print option.

Now there is no need to create a separate option for printing… it's user friendly, and you can set this alive very easily.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United States United States
I am Roopesh Rajendran, I have 3 + years expirience in asp.net C#. Currently i am working in U S Technology Techopark.i am an ative member in Code project,.net spider,Expert Exchange....
i have MCP's in C# web,XML Web service, % brain bech certifications...published lot of articles in Code project..


Comments and Discussions

 
Questionpage setup for printer Pin
amiya_50338-Jun-07 0:41
amiya_50338-Jun-07 0:41 
I don't want to print the
1. Title (top left corner),
2. Page No (Top right corner),
3. link path ex. http://localhost/nops/reports.aspx (Bottom left corner) and
4. print date (bottom right corner).

Help me how to remove these information. I need to print the necessary informations only.

Post the code pls.

Brotherly
Amiya
QuestionHow to remove title, pageno, link path, print date? [modified] Pin
Fakhru1-Apr-07 1:34
Fakhru1-Apr-07 1:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.