Printer Friendly Web Page
I wish to let client to have a pretty print page from a web page.
Hence, I change the following line from
<link rel="stylesheet" type="text/css" href="screen.css" media="screen"/>
to
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
The content of screen.css and print.css are the same.
However, for print version, I realize all my CSS style had gone. Table color, padding, margin, font... all gone. and when I view under FireBug, it seems there is no style.
May I know anything I had missed out?
print.html
<html>
<head>
<title>
</title>
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
</head>
<body>
<div>
<div class="main-title">Worksheet</div>
<div class="header-table-container">
<table>
<tbody>
<tr>
<th>House Address</th>
<td>33, Robinson Road.</td>
</tr>
<tbody>
</table>
</div>
<div class="main-table-container">
<table>
<tbody>
<tr>
<th width="10%" rowspan="2">Parts</th>
<th width="90%" colspan="4">Doraemon</th>
</tr>
<tr>
<th width="25%">Trial 1</th>
<th width="25%">Trial 2</th>
<th width="25%">Trial 3</th>
<th width="25%">Range</th>
</tr>
<tr>
<td class=开发者_Go百科"numerical">1</td>
<td class="numerical">0.000</td>
<td class="numerical">0.000</td>
<td class="numerical">0.000</td>
<td class="numerical">0.000</td>
</tr>
</tbody></table>
</div>
<div class="main-table-container">
<table>
<tbody>
<tr>
<th width="10%" rowspan="2">Parts</th>
<th width="90%" colspan="4">Doraemon</th>
</tr>
<tr>
<th width="25%">Trial 1</th>
<th width="25%">Trial 2</th>
<th width="25%">Trial 3</th>
<th width="25%">Range</th>
</tr>
<tr>
<td class="numerical">1</td>
<td class="numerical">0.000</td>
<td class="numerical">0.000</td>
<td class="numerical">0.000</td>
<td class="numerical">0.000</td>
</tr>
</tbody></table>
</div>
<div class="main-table-container">
<table>
<tbody>
<tr>
<th width="10%" rowspan="2">Parts</th>
<th width="90%" colspan="4">Doraemon</th>
</tr>
<tr>
<th width="25%">Trial 1</th>
<th width="25%">Trial 2</th>
<th width="25%">Trial 3</th>
<th width="25%">Range</th>
</tr>
<tr>
<td class="numerical">1</td>
<td class="numerical">0.000</td>
<td class="numerical">0.000</td>
<td class="numerical">0.000</td>
<td class="numerical">0.000</td>
</tr>
</tbody></table>
</div>
</body>
</html>
print.css
body {
color:#000000;
font-family:Helvetica,Arial,sans-serif;
font-size:small;
}
table {
border:1px solid #BBBBBB;
border-collapse:collapse;
border-spacing:0;
clear:right;
margin:1em 0 0 1px;
font-size:small;
}
th {
background-color:#E5ECF9;
border:1px solid #BBBBBB;
font-weight:bold;
padding:3px 6px;
text-align:left;
}
td {
background-color:#FFFFFF;
border:1px solid #BBBBBB;
padding:3px 6px;
text-align:left;
vertical-align:top;
}
th.numerical,
td.numerical {
text-align:right;
}
.main-title {
text-align:center;
font-weight:bold;
font-size:large ;
}
.header-table-container {
}
.main-table-container {
float:left;
margin:0px 20px 0px 0px;
width:30%;
}
You say you changed the line to media="print"... I take it that you do not have a media="screen" stylesheet on the page anymore then? Further, you're looking at the page in Firebug, and the styles are gone?
You seem to have some misconception about what you have done...
<link rel="stylesheet" type="text/css" href="screen.css" media="screen"/>
means "use the stylesheet screen.css whenever displaying this document on screen.
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
means "use the stylesheet print.css whenever printing this document.
print stylesheets only apply when the page is printed. screen stylesheets only apply when the document is displayed on screen. If you only have one or the other, your page only has styles either if it's displayed on screen or printed. In your case, the page should look fine printed, but have no styles when viewed on screen. If you want it to be styled in both cases, you need to link two stylesheets, one for screen and one for print.
Having said that, most browsers apply the screen stylesheet also when printing, unless you specifically include a print stylesheet. I.e., if both stylesheets are identical anyway, you probably don't need to include a separate print stylesheet.
Firebug will not allow you to debug print CSS. And that would not be accurate anyway as the its ultimately going to the printer, not a browser.
Also note that not all backgrounds will be used even if you declare them in your print CSS. Different browsers will do different things. Some even invert colours for a black background, white text page.
You need to use the print preview button to see how your print styles affect things.
I've found this way to be nice, that way you dont have to create a new html file
function printPage(){
var w = window.open();
var headers = $("#headers").html();
var field= $("#field1").html();
var field2= $("#field2").html();
var html = "<!DOCTYPE HTML>";
html += '<html lang="en-us">';
html += '<head><style></style></head>';
html += "<body>";
//check to see if they are null so "undefined" doesnt print on the page. <br>s optional, just to give space
if(headers != null) html += headers + "<br/><br/>";
if(field != null) html += field + "<br/><br/>";
if(field2 != null) html += field2 + "<br/><br/>";
html += "</body>";
w.document.write(html);
w.window.print();
w.document.close();
};
加载中,请稍侯......
精彩评论