MEMO-網頁列印強迫分頁

<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>

# 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"是這個用途，又學到好東西了，太感謝了。

你的看法呢?

標題 (必要的) 

姓名 (必要的) 

你的URL (選擇性的)

意見 (必要的) 

Remember Me?

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

CAPTCHA / 驗證碼 :

5 + 3 =

搜尋