發表者討論內容

冷日
(冷日) 發表時間：2009/3/12 10:13

Webmaster

註冊日: 2008/2/19
來自:
發表數: 15771

[分享]如何在HTML上面實現分頁的功能！

大家不知道有沒有使用HTML排版的需要？
有的時候，不是需要這麼正規的報表的時候，
我們何不就直接在HTML裡面排版列印呢？

但是，在HTML裡面如何讓印表機乖乖分頁呢？
用樣式表（CSS）就可以解決問題啦！

page-break-after : always;

範例：

.PageBreak {
    page-break-after : always;
}

那麼在每個有用到 .PageBreak 樣式的地方都會分頁！
範例：

<br class="PageBreak">

就會產生一個分頁

或者是：

<hr class="PageBreak">

這樣也是一個分頁

當然，如果妳真的很懶，又不見得很多地方要分頁的話，也可以：

<br style="page-break-after : always;">

這樣就可以分頁啦！

希望能幫上大家！

回覆

冷日
(冷日) 發表時間：2011/12/8 9:34

Webmaster

註冊日: 2008/2/19
來自:
發表數: 15771

[轉貼]自動列印與分頁列印

自動列印與分頁列印

bensy 發表

網頁的列印無法控制嗎? 你可以試試這個方法.

設計網頁的時候, 通常考慮到的是 '讓瀏覽者賞心悅目' 的排版問題。
如果瀏覽者打算列印你的網頁, 或是你的網頁利用資料庫處理了一些資料,
準備製成報表, 這時便會遇到分頁的問題。

怎麼樣讓網頁於列印時自動分成適當的頁數呢？
其實有個簡單的指令, 馬上能讓你達成心願。

這個指令是:

<P style='page-break-after:always'></P>

雖然這是 HTML 的 css 而非 Javascript 的指令, 不過配合網頁進入時
所啟動的 Javascript 的 window.print() 印表機交談視窗指令,
更能讓網頁的列印方便許多！

example.htm


<HTML><HEAD><TITLE>網頁舉例</TITLE></HEAD>
<BODY>
<CENTER><A HREF='print.htm'>連結到想要分頁列印的網頁</A></CENTER>
</BODY>
</HTML>

print.htm


<HTML><HEAD><TITLE>自動分頁列印！</TITLE></HEAD>
<BODY onLoad='printPage()'>
<SCRIPT LANGUAGE='JavaScript'>
<!--// 自動列印: 會彈出印表機交談視窗
function printPage() {
   window.print();
}
//-->
</SCRIPT>
<CENTER>這是列印的第一頁！</CENTER>
<P style='page-break-after:always'></P>
<CENTER>這是列印的第二頁！</CENTER>
</BODY>
</HTML>

最後更新日期: 8/22/2004 2:45:41 AM

原文出處：自動列印與分頁列印

回覆

主題一覽的下方

討論串

前一個主題 | 下一個主題 | 頁首 |

| |

發表新主題

網頁設計 : [分享]如何在HTML上面實現分頁的功能！