網頁的列印控制
設計網頁的時候, 通常考慮到的是 '讓瀏覽者賞心悅目' 的排版問題。
如果瀏覽者打算列印你的網頁, 或是你的網頁利用資料庫處理了一些資料,
準備製成報表, 這時便會遇到分頁的問題。
怎麼樣讓網頁於列印時自動分成適當的頁數呢？
其實有個簡單的指令, 馬上能讓你達成心願。
這個指令是:
{{{
<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>
}}}
----
昨天跟同事研究一個小問題，是要把註冊繳費單列印出來，原本這個工作是用word的合併列印來讀取excel裡面的資料，再把它們印出來。 現在想要用網頁+資料庫，讓用戶端可以直接從網頁上瀏覽後再列印，解決方式就是為這個網頁設計一個列印專用的 css樣式表:
<style type="text/css" media="print">
...
</style>
接下來的問題就是A4印表機的整頁內容最大邊界為何，經過昨天的測試大致上得到下列的結果...
#printArea{
width:170mm;
height:258mm;
border:solid 1px #000000;
font-size:12pt;
}
我在<body>區塊裡面放了一個<div>並把它的id名為printArea，
在預覽列印的時候可以看到一個大框框(border:solid 1px #000000;)
調到這個大小(w:170mm,h:258mm)剛剛好佈滿可列印的內容區。
另一個要注意的就是字型與字體的變化:
一般我們在公文書上的字型都是用標楷體居多，所以我們可以這麼定義...
font-family:"標楷體";
字體的部份是要以列印出來的實際大小為準，所以用pt作為字體單位...
exam:
font-size:16pt; /*段落項目的大小 */
font-size:12pt; /* 一般內文的大小 */
font-size:10pt; /* 較小的字體 */
font-size:8pt; /* 如果是要列印出來，那到8pt已經差不多夠小了，再小就不能看嘍! */
因為上列的css都是針對print用的CSS，所以針對網頁瀏覽時呈現方面也要另外製作一個css
<style type="text/css" media="screen">
...
</style>
這是比用Crystal Report更方便的網頁列印Solution，不過有點累人就是了....
列印 html 時，css 要直接用 style tag 不能 include css file，
否則不會產生效果。
----
如果瀏覽者打算列印你的網頁, 或是你的網頁利用資料庫處理了一些資料,
準備製成報表, 這時便會遇到分頁的問題。
怎麼樣讓網頁於列印時自動分成適當的頁數呢？
其實有個簡單的指令, 馬上能讓你達成心願。
這個指令是:
{{{
<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>
}}}
----
昨天跟同事研究一個小問題，是要把註冊繳費單列印出來，原本這個工作是用word的合併列印來讀取excel裡面的資料，再把它們印出來。 現在想要用網頁+資料庫，讓用戶端可以直接從網頁上瀏覽後再列印，解決方式就是為這個網頁設計一個列印專用的 css樣式表:
<style type="text/css" media="print">
...
</style>
接下來的問題就是A4印表機的整頁內容最大邊界為何，經過昨天的測試大致上得到下列的結果...
#printArea{
width:170mm;
height:258mm;
border:solid 1px #000000;
font-size:12pt;
}
我在<body>區塊裡面放了一個<div>並把它的id名為printArea，
在預覽列印的時候可以看到一個大框框(border:solid 1px #000000;)
調到這個大小(w:170mm,h:258mm)剛剛好佈滿可列印的內容區。
另一個要注意的就是字型與字體的變化:
一般我們在公文書上的字型都是用標楷體居多，所以我們可以這麼定義...
font-family:"標楷體";
字體的部份是要以列印出來的實際大小為準，所以用pt作為字體單位...
exam:
font-size:16pt; /*段落項目的大小 */
font-size:12pt; /* 一般內文的大小 */
font-size:10pt; /* 較小的字體 */
font-size:8pt; /* 如果是要列印出來，那到8pt已經差不多夠小了，再小就不能看嘍! */
因為上列的css都是針對print用的CSS，所以針對網頁瀏覽時呈現方面也要另外製作一個css
<style type="text/css" media="screen">
...
</style>
這是比用Crystal Report更方便的網頁列印Solution，不過有點累人就是了....
列印 html 時，css 要直接用 style tag 不能 include css file，
否則不會產生效果。
----
留言