專案裡有個網頁列印的需求,在一份清單中,每個項目以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>

【程式說明】

  1. 列印時能強迫分頁歸功於CSS屬性: page-break-before
  2. 利用jQuery的each()及index參數,做到每隔六個項目一數,在後方插入一個表頭並設定強迫換頁印列。(奉天承運,User詔曰: 每頁都要有頁首,不然很醜...)
  3. 用window.print()列印。(註: 有跨瀏覽器Issue,但本案瀏覽器限IE)
  4. 換頁頁首預設隱藏,列印按鈕按下時,顯示換頁頁首,並隱藏列印鈕,印完再恢復。
    【2009-11-05更新】關於列時印隱藏元素,有更好的做法

Comments

# by Ammon

不應使用第四點的方式 讓使用者按了網頁上的列印按鈕之後做隱藏顯示的動作 應該使用 media="print" 的屬性設定顯示與隱藏的樣式 使用者不論是直接使用瀏覽器選單選列印、預覽列印或Ctrl+P 都可以得到想要的效果

# by Jeffrey

to Ammon, 原來media="print"是這個用途,又學到好東西了,太感謝了。

Post a comment