純html的table打印注意事項 - yjmyzz－IT工程師數位筆記本

文章出處

1. 在firefox下，每頁均會打印重復thead（表頭），tfoot（表尾）的內容；IE8下無效(其它IE版本未測試)

2. 分頁的處理

    @media print {
     .page-break { page-break-after: always; }
   }

在需要分頁的tr上，加上該樣式即可

3.隱藏某些不需要打印的區域

    @media print {
    .no-print { display: none; }
     }

4.頁面頂部網址之類的，如何去掉？

IE: File -> Page Setup

FireFox: Print -> Page Setup

5.打印頁面指定區域

<iframe id="frmPrint" width="0" height="0" frameborder="0"></iframe>
<div id="divContent">這是打印的內容</div>
<div>這里不需要打印</div>
<button onclick="printTest()">打印</button>
<script type="text/javascript">
	function printTest(){
		var ifrm = document.getElementById("frmPrint");		
		//下行中的style只是為了演示如何附加樣式
		ifrm.contentWindow.document.body.innerHTML = "<style>*{color:red}</style>" + document.getElementById("divContent").innerHTML;
		ifrm.contentWindow.print();
	}	
</script>

上述代碼僅適用于FireFox，IE下建議用css隱藏不需打印的內容

完整示例代碼：

<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>html打印測試</title>
		<style type="text/css" media="all">
			* { margin:0; padding:0; font-size:12px }
			table { margin:10px; border:2px solid #000; border-collapse:collapse; margin:5px auto }
			th, td { border:1px solid #000; border-collapse:collapse; padding:3px 5px }
			h1 { font-size:24px }
			 @media print {
				.no-print { display: none; }
				.page-break { page-break-after: always; }
			}
		</style>
	</head>
	<body>
		<div class="no-print" style="text-align:center;margin:5px">
			<button onClick="window.print()"> 打 印 </button>
		</div>
		<table >
			<thead>
				<tr>
					<th colspan="5">
						<h1>XXXX報表</h1>
					</th>
				</tr>
				<tr>
					<th> 序號 </th>
					<th> 欄目1 </th>
					<th> 欄目2 </th>
					<th> 欄目3 </th>
					<th> 欄目4 </th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td> 1 </td>
					<td> 數據1 </td>
					<td> 數據2 </td>
					<td> 數據3 </td>
					<td> 數據4 </td>
				</tr>
				<tr class="page-break">
					<td> 2 </td>
					<td> 數據1 </td>
					<td> 數據2 </td>
					<td> 數據3 </td>
					<td> 數據4 </td>
				</tr>
				<tr>
					<td> 3 </td>
					<td> 數據1 </td>
					<td> 數據2 </td>
					<td> 數據3 </td>
					<td> 數據4 </td>
				</tr>
				<tr>
					<td> 4 </td>
					<td> 數據1 </td>
					<td> 數據2 </td>
					<td> 數據3 </td>
					<td> 數據4 </td>
				</tr>
				<tr>
					<td> 5 </td>
					<td> 數據1 </td>
					<td> 數據2 </td>
					<td> 數據3 </td>
					<td> 數據4 </td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<th> 合計： </th>
					<th> </th>
					<th> </th>
					<th> 300.00 </th>
					<th> 300.00 </th>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

文章列表