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

Posted by Neo
12月 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

D 程式設計

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.

Comments

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

Comment 由 kelly on 9月 11, 2006 @ 4:28 pm

感謝分享

Comment 由 nian on 11月 21, 2006 @ 12:04 pm

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

Comment 由 j.h.pon on 1月 6, 2007 @ 6:18 pm

太棒了！剛好需要，感恩

Comment 由 該隱 on 4月 18, 2007 @ 5:47 pm

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

Comment 由 威威 on 6月 14, 2007 @ 9:16 pm

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

Comment 由 翔 on 11月 28, 2007 @ 7:43 pm

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

Comment 由 Andy on 9月 8, 2008 @ 6:35 pm
發表您的評論

(必要)

(必要)