MEMO-網頁列印強迫分頁
2 | 27,336 |
專案裡有個網頁列印的需求,在一份清單中,每個項目以Table方式呈現,而列印時不希望項目Table跨頁。以下是我搞出來的解決方案:
排版顯示純文字
<style type="text/css">
.cPrintOnly {
page-break-before: always;
display: none;
}
</style>
<script type="text/javascript">
$(function() {
//DataList的每六列加一個表頭
var $rows = $("#DataList1 > tbody > tr");
$rows.each(function(i) {
//取6的倍數, 排除最後一筆
if ((i + 1) % 6 == 0 && i != $rows.length - 1) {
//加上頁首並設定跳頁
$(this).after("<tr class='cPrintOnly'><td>" +
$("#dvPageHeader").html() + "</td></tr>");
}
});
//列印鈕功能
$("#btnPrint").click(function() {
var $dv = $(this).parent();
var $pgHdr = $(".cPrintOnly");
//將列印鈕隱藏
$dv.hide();
//顯示換頁頁首
$pgHdr.show();
//列印
window.print();
//顯示列印鈕、隱藏換頁表頭
$dv.show();
$pgHdr.hide();
});
});
</script>
【程式說明】
- 列印時能強迫分頁歸功於CSS屬性: page-break-before
- 利用jQuery的each()及index參數,做到每隔六個項目一數,在後方插入一個表頭並設定強迫換頁印列。(奉天承運,User詔曰: 每頁都要有頁首,不然很醜...)
- 用window.print()列印。(註: 有跨瀏覽器Issue,但本案瀏覽器限IE)
換頁頁首預設隱藏,列印按鈕按下時,顯示換頁頁首,並隱藏列印鈕,印完再恢復。
【2009-11-05更新】關於列時印隱藏元素,有更好的做法。
Comments
# by Ammon
不應使用第四點的方式 讓使用者按了網頁上的列印按鈕之後做隱藏顯示的動作 應該使用 media="print" 的屬性設定顯示與隱藏的樣式 使用者不論是直接使用瀏覽器選單選列印、預覽列印或Ctrl+P 都可以得到想要的效果
# by Jeffrey
to Ammon, 原來media="print"是這個用途,又學到好東西了,太感謝了。