如何解决非IE浏览器的web打印

来老师

2012-10-15

关注关注

非IE浏览器例如FF，chrome，在打印时，默认是不会打印table的背景和图片的，必须手动设置。而IE有activeX和wb可以设置，通过JS修改默认配置。

难道真的无法实现了吗，下载了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

ie html代码