Click here to Skip to main content
Click here to Skip to main content

Changing Page Style for Printing

, 17 Aug 2006
Rate this:
Please Sign up or sign in to vote.
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:

The page has to be changed into this:

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:

<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:

#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.

.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

Share

About the Author

Roopesh Rajendran
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 Pinmemberamiya_50338-Jun-07 0:41 
QuestionHow to remove title, pageno, link path, print date? [modified] PinmemberFakhru1-Apr-07 1:34 

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140814.1 | Last Updated 17 Aug 2006
Article Copyright 2006 by Roopesh Rajendran
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid