MEMO-網頁列印強迫分頁

專案裡有個網頁列印的需求,在一份清單中,每個項目以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更新】關於列時印隱藏元素,有更好的做法
歡迎推文分享:
Published 04 November 2009 07:24 PM 由 Jeffrey
Filed under: , ,
Views: 22,472



意見

# Ammon said on 05 November, 2009 06:18 AM

不應使用第四點的方式

讓使用者按了網頁上的列印按鈕之後做隱藏顯示的動作

應該使用 media="print" 的屬性設定顯示與隱藏的樣式

使用者不論是直接使用瀏覽器選單選列印、預覽列印或Ctrl+P

都可以得到想要的效果

# Jeffrey said on 05 November, 2009 07:24 AM

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

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<November 2009>
SunMonTueWedThuFriSat
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication