如何解决非IE浏览器的web打印
非IE浏览器例如FF，chrome，在打印时，默认是不会打印table的背景和图片的，必须手动设置。而IE有activeX和wb可以设置，通过JS修改默认配置。
难道真的无法实现了吗，下载了jprintarea也是无法实现的。
如果需要套打或者要实现打印预览并在预览中设置打印效果，那就很难实现了。
window.print的功能确实是比较弱的。
我觉得解决办法就是不用background-color和background-image样式。而采用div+image的方式
将背景图片放在image中，image用绝对定位和clip属性定位到指定位置。
我覺得這方法的確比較符合實務的情境，不但能跨瀏覽器，列印的問題也解決了，HTML 也比較乾淨
我的demo代码
参考：http://blog.miniasp.com/post/2008/12/CSS-Spriting-without-using-background-image.aspx
难道真的无法实现了吗，下载了jprintarea也是无法实现的。
如果需要套打或者要实现打印预览并在预览中设置打印效果，那就很难实现了。
window.print的功能确实是比较弱的。
我觉得解决办法就是不用background-color和background-image样式。而采用div+image的方式
将背景图片放在image中，image用绝对定位和clip属性定位到指定位置。
<div class="menu-about">
<img class="transparent_png"
src="http://www.jennifersemtner.com/wp-content/uploads/2008/12/company-menu.png"
alt="About" title="About Us" width="611" height="39" />
</div>
.menu-about {
position: relative;
top: 0; left: -293px;
width: 106px; height: 29px;
}
.menu-about img {
position: absolute;
clip: rect(0 399px 29px 293px);
}
我覺得這方法的確比較符合實務的情境，不但能跨瀏覽器，列印的問題也解決了，HTML 也比較乾淨
我的demo代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>print.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$("#print_button").click(function() {
$("#print_button").hide();
window.print();
});
});
</script>
<style>
#imgDiv{
position:absolute;
}
#myPrintArea{
position:absolute;
width: 100%;
}
.bgImg{
position: absolute;
display:block;
left:0px;
top:10px;
z-index: 0;
}
#listTb {
position: absolute;
left:0px;
top:10px;
z-index: 1;
color:#ccc;
}
</style>
</head>
<body>
<div id="print_button" >
Print
</div>
<div id="myPrintArea">
<img src="bg.png" class="bgImg">
<table id="listTb">
<tbody>
<tr style="display:table-header-group;font-weight:bold">
<th>Publication Date</th><th>Account</th><th>Issue No.</th><th>首數</th><th>印數</th><th>Edit</th>
</tr>
<tr class="dataTr">
<td class="exportTD">2012-10-17</td><td class="exportTD">ED</td><td class="exportTD">123456</td><td class="exportTD">A:1.00
<br>
B:1.12
<br>
C:1.32
<br>
</td><td class="exportTD">A:1
<br>
B:3
<br>
C:1
<br>
D:1
<br>
E:1
<br>
</td><td>
<input type="button" class="TinputAdd noselected" editid="1" value="Edit">
</td>
</tr>
<tr class="dataTr">
<td class="exportTD">2012-10-15</td><td class="exportTD">OS</td><td class="exportTD">123</td><td class="exportTD">A:1.00
<br>
D:1.12
<br>
</td><td class="exportTD">A:1
<br>
B:1
<br>
C:1
<br>
D:1
<br>
E:1
<br>
</td><td>
<input type="button" class="TinputAdd noselected" editid="3" value="Edit">
</td>
</tr>
<tr class="dataTr">
<td class="exportTD">2012-10-15</td><td class="exportTD">WW</td><td class="exportTD">012</td><td class="exportTD"></td><td class="exportTD">A:1
<br>
</td><td>
<input type="button" class="TinputAdd noselected" editid="4" value="Edit">
</td>
</tr>
<tr class="dataTr">
<td class="exportTD">2012-10-10</td><td class="exportTD">OS</td><td class="exportTD">00</td><td class="exportTD"></td><td class="exportTD">A:1
<br>
</td><td>
<input type="button" class="TinputAdd noselected" editid="2" value="Edit">
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
参考：http://blog.miniasp.com/post/2008/12/CSS-Spriting-without-using-background-image.aspx