2012-12-07 65 views
3

我有一個非「打印機友好」的頁面,所以我的用戶要求打印出一個表格來顯示搜索結果。我創建了一個打印友好的頁面,通過一個按鈕打開並從原始表格填充。新頁面根據需要顯示原始表格中的「斑馬條紋」。但是當我拉起打印預覽(瀏覽器菜單>文件>打印預覽)時,條紋消失了。字體更改顯示。所有其他樣式變化都顯示出來。但TR陰影影響條紋不會翻譯。我的'斑馬條紋'表不打印條紋

這裏是我的代碼:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="ISO-8859-1"> 
    <meta http-equiv="expires" value="Thu, 16 Mar 2000 11:00:00 GMT" /> 
    <meta http-equiv="pragma" content="no-cache" /> 
    <script type="text/javascript" src="/pkc/jscripts/jquery_current.js"></script> 
    <title>Product Knowledge Center - Results</title> 
    <style> 
     body{ 
     font-family: arial; 
     } 
     div{ 
     font-size: 12pt; 
     } 
     .odd{ background: #DDDDDD; } 
     .even{ background: #FFFFFF; } 
     .hdrSpan{ 
     width: 200px; 
     display: inline; 
     float: left; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="divHeader"> 
     <span class="hdrSpan">Line</span> 
     <span id="spnLine"></span><br /> 
     <span class="hdrSpan">Company</span> 
     <span id="spnCompany"></span><br /> 
     <span class="hdrSpan">State</span> 
     <span id="spnState"></span><br /> 
     <span class="hdrSpan">Eff. Date</span> 
     <span id="spnEffDt"></span> 
    </div> 
    <br /> 
    <hr /> 
    <div id="divResults"> 
    </div> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
     $("#spnLine").text(window.opener.$('[name="Line"] option:selected').text()); 
     $("#spnCompany").text(window.opener.$('[name="Company"] option:selected').text()); 
     $("#spnState").text(window.opener.$('[name="State"] option:selected').text()); 
     $("#spnEffDt").text(window.opener.$('[name="effectiveDate"]').val()); 
     $("#divResults").html(window.opener.$("#idResults").html()); 
     $("#resultsTbl tr").removeAttr("onclick"); 
     }); 
    </script> 
    </body> 
</html> 

正如我希望是顯而易見的,該代碼是很直接的和簡單的。我只是不明白爲什麼在印刷版上沒有出現條紋。

+4

打印機設置通常包括用於_print背景色/圖像_的選項。 – canon

+5

它是瀏覽器上的一個選項。大多數瀏覽器在打印時不顯示背景顏色。然而,我知道在Chrome上有一個允許它的複選框。 – phpisuber01

回答

2

打印機設置通常包括用於打印背景顏色/圖像的選項。

這是最好的答案 - 目前爲止(15分鐘?)。我將把它標記爲我使用的那個。我添加了一個警告頁面加載,告訴用戶如何獲得他們打印輸出的條紋,現在我下一個問題...

2

有沒有太多的事情可以做,因爲這個選項取決於讓用戶在打印網頁時直接配置它。 理想情況下,用戶應該決定是否要在印刷時使用更多或更少的墨水。

有Webkit的瀏覽器解決方法:

-webkit-print-color-adjust: exact; 

在Firefox和IE,你可以通過檢查頁的選項設置:您可以通過添加以下你的CSS代碼強制的背景色印刷配置對話框。

+1

謝謝,這對我有用+1 – hayatbiralem