CODEWITHSUNDEEP
c#asp.nethtmlcssprinting-web-page
Amol Kolekar
Amol Kolekar

Reputation: 2325

How to print a page along with all CSS formatting

I am doing a print functionality. The problem I am getting is that the page, which is being printed, is not retaining it's CSS formatting. I am getting plain text on print without CSS. Does anyone know how to print page with all it's CSS formatting unchanged.

Upvotes: 2

Views: 3742

Answers (2)

FlashTrev
FlashTrev

Reputation: 517

In simple terms for anyone who is still wondering, you can have a CSS stylesheet that has 'media="screen" ' in the link markup as follows:

<link id="Link1" href="../Styles/MainStyleSheet.css" rel="Stylesheet" type="text/css" runat="server" media="screen" />

this will style what is seen in the browser screen.

You can also have another CSS stylesheet that has 'media="print" ' in the link markup as follows:

<link rel="stylesheet" href="../Styles/print_voucher.css" type="text/css" media="print" />

this will style what is seen when a user views a Print Preview / when it is printed on the paper.

If you put something like:

.inprintdisabled
{
 display: none;
}

in your print_voucher.css file. Everywhere in your HTML code where there is a

<div class="inprintdisabled">

it will show the contents of that div in the browser window but WILL NOT print out / show it in a print preview window.

Likewise, if you put

.inprintOnly
{
 display:none;
}

in your MainStyleSheet and 

<div class="inprintOnly">

in your HTML code, you can have objects (text, images, etc) that don't appear on your browser screen , but will appear when print previewed / printed out.

Hope this helps.

Upvotes: 2

mrtsherman
mrtsherman

Reputation: 39872

Most likely the site you are trying to print has a custom stylesheet for printing. This stylesheet is often simplified and made to fit onto a printable page. I don't think there is much you can do about it unless you have the ability to modify or remove the print CSS file.

Intro to print style sheets.

Example markup for one.

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Perhaps there is some way to use javascript to programmatically remove the style sheet, but I am not sure.

Upvotes: 3

Related Questions