適合打印的網頁

我希望讓客戶從網頁上打印漂亮的頁面。適合打印的網頁

因此，我改變從

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

下面一行

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

screen.css的含量和print.css是相同的。

但是，對於print版本，我意識到我所有的CSS樣式都消失了。表格顏色，填充，邊距，字體...全部消失。當我在FireBug下查看時，似乎沒有任何風格。

我可以知道我錯過了什麼嗎？

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="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%; 
}

來源

2010-11-08 Cheok Yan Cheng

你進行打印測試？只是一個預感，也許Firebug不會顯示print.css，但是你的樣式實際上可能正在工作？ – danjah 2010-11-08 04:02:44

你真的試過打印過嗎？ 'media =「print」'意味着樣式將被用於* only *用於打印 - 不用於屏幕。 – 2010-11-08 04:04:24

你說你改變行至media="print" ...我認爲你這樣做不再有頁面上的media="screen"樣式表然後？此外，您正在查看Firebug中的頁面，並且樣式不見了？
你似乎對你做了什麼一些誤解......

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

表示「使用樣式表screen.css，只要在屏幕上顯示本文。

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

表示」使用樣式表print.css每當打印本文檔。

print樣式表僅在頁面打印時適用。 screen樣式表僅在文檔顯示在屏幕上時適用。如果您只有一個或另一個，則只有在屏幕上顯示或打印時，您的頁面才具有樣式。在你的情況下，頁面應該看起來很好打印，但在屏幕上查看時沒有樣式。如果您希望在兩種情況下都使用樣式表，則需要鏈接兩個樣式表，一個用於屏幕，一個用於打印。儘管如此，大多數瀏覽器在打印時也應用screen樣式表，除非您特別包含樣式表print。也就是說，如果兩個樣式表都是相同的，你可能不需要包含單獨的打印樣式表。

來源

2010-11-08 04:09:27 deceze

Firebug不會允許您調試打印CSS。無論如何，這並不準確，因爲它最終會轉到打印機，而不是瀏覽器。

另請注意，即使您在打印CSS中聲明它們，也不會使用所有背景。不同的瀏覽器會做不同的事情。有些甚至反轉黑色背景，白色文本頁面的顏色。

您需要使用打印預覽按鈕來查看打印樣式如何影響事物。

來源

2010-11-08 04:26:14

+1打印預覽建議，在測試時保存環境！另外，根據屏幕文檔的複雜程度，我經常採用的方法是使用set my media =「screen」設置爲media =「all」，並覆蓋media =「print」表單中任何不符合/有問題的樣式。儘管使用media =「all」可能會對替代技術產生不利影響，如果這對您是個問題。 – danjah 2010-11-08 22:28:40

我發現這種方式是好的，你不要這樣要創建一個新的HTML文件

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(); 
    };

來源

2013-06-27 15:21:15

適合打印的網頁

回答

相關問題