打印使用CSS格式化的HTML文档

Question

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.

Answer 1

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.

Answer 2

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

Answer 3

You can use different styles for screen and print media in your style sheet, ie

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