CODEWITHSUNDEEP
csshtmlprinting
Felipe Oriani
Felipe Oriani

Reputation: 38638

Printing Html Document formatted with CSS

I have a asp.net mvc application and my Views are in HTML5. I need to print a view as a report. This View shows some data with <table/> tag and it is formatted with css style as font-family, font-size, text-align properties etc. When I try to print it with Chrome (exporting to PDF) my css does not work, I mean, the print's result is shown without formating.

What can I do to solve this problem? It Does not matter whether I use css to apply the style or use html tags to format the page, but I wish it would leave the impression formatted.

PS: I would like to keep the html valid document.

Upvotes: 1

Views: 3540

Answers (3)

The Alpha
The Alpha

Reputation: 146269

You can use different styles for screen and print media in your style sheet, i.e.

@media screen
{
    table.test {
        font-family:"Times New Roman",Georgia;
        font-size:10px;
        // more
    }
}

@media print
{
    table.test {
        font-family:Verdana, Arial;
        font-size:10px;
        // more
    }
}

When you'll print the table only styles defined in print media will be applied.

Check this for more.

Upvotes: 0

Endre Simo
Endre Simo

Reputation: 11541

You can try to define the css semantics with @media print rule, then stylize the stylesheet with that in mind. Maybe this help.

Upvotes: 0

Dan
Dan

Reputation: 701

You need to split up the css for screen and print separately just by following setting

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

then no need to change your html code just change the css or duplicate the old css.

Upvotes: 1

Related Questions