列印 HTML 網頁強制換頁的方式

十二月 7, 2005

列印 HTML 無法強制換頁其實是一件很令人困擾的事，要達到這個功能其實可以透過 CSS 的 Pagebreak 來處理。


強制分頁有大概只有二種用的到:

{ page-break-after: always; /*在標籤後換頁*/ }
{ page-break-before: always; /*在標籤前換頁*/ }

這二個當中，大概最常用的就是 page-break-after: always，就是在指定的標籤後強制換頁，可以參考下面的 HTML 範例:

<div STYLE="page-break-after: always;">
第一頁
</div>
第二頁

再來就可以試著列印看看效果如何。

IE 7 需加入&nbsp; 才可換頁: (2008/2/16 更新)

範例:

第一頁
<P style='page-break-after:always'>&nbsp;</P>
第二頁

其它 CSS 列印相關屬性可以參考:
http://www.w3schools.com/css/css_ref_print.asp

迴響 (8)

 

  1. kelly 說道：
    九月 11, 2006 at 4:28 下午

    剛好在找如何解決html換頁的問題~看到Neo大大提供的這個方法,正好解決我的問題,非常感謝~

  2. nian 說道：
    十一月 21, 2006 at 12:04 下午

    感謝分享

  3. j.h.pon 說道：
    一月 6, 2007 at 6:18 下午

    請問有這種指令嗎? 就是『規定某一段資料必需印同一頁』請問有人會嗎? 請回我信箱! Thank you!

  4. 該隱 說道：
    四月 18, 2007 at 5:47 下午

    太棒了！剛好需要，感恩

  5. 威威 說道：
    六月 14, 2007 at 9:16 下午

    太感謝了
    馬上解決我的問題~

  6. 翔 說道：
    十一月 28, 2007 at 7:43 下午

    今天升級完IE7後..發現這個功能在IE7好像沒有支援.

  7. Andy 說道：
    九月 8, 2008 at 6:35 下午

    今天剛好在找 為什麼用了多年的page-break-after: always
    在 IE 7 下 會出問題，終於找到解答了，謝謝囉 ~~

  8. tong 說道：
    十月 19, 2009 at 3:15 下午

    感謝分享

迴響