若對方有要求要能列印時，
我通常會另外再寫一個專門做為列印用的網頁
而且還在那邊努力的計算每頁可以印出的列數，
以做為控制列印表頭的基礎，
這就有點難度了，因為不同的瀏覽器的狀況不一樣，所以很是麻煩
今天因為努力的找如何在 firefox 上做出列印的預覽，
得知無法以 javascript 來做出預覽的動作時，
意外的看到幾個做法，
特別記錄下來
首先便是 css 中便有特別設置 media="screen" 及 media="print"
前者便是專門用來給螢幕呈現用的樣式，後面便是列印專用
因此我可以在這其中決定哪個區塊或式按鈕要不要呈現，甚至連螢幕上文字顏色與背景顏色都可以和列印出來的不一樣
此外要控制每頁列印的表頭，也不必去辛苦的計算半天
直接用
被這兩個包起來的部份便是列印用的表頭
每頁都會自動列印出去
且試過在 ie , firefox , chrome 上都行
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>愛情急診室--會員一覽表</title> | |
| <style type="text/css" media="screen"> <!-- 專門給螢幕呈現用的 css 區塊 --> | |
| /* 顯示時採用灰底藍字來列印 */ | |
| .trClass { color: Blue ; background : #464646; } | |
| </style> | |
| <style type="text/css" media="print"> <!-- 專門給列印用的 css 區塊 --> | |
| /* 列印時改用白底黑字來列印，且畫面上方的下拉式 menu 以及一些按鈕都不要列印出來 */ | |
| .menuList { display: none; } | |
| .nornalBtn { display: none; } | |
| .trClass { color: #000000 ; background : #FFFFFF; } | |
| </style> | |
| </head> | |
| <body> | |
| <table> | |
| <THEAD style="display:table-header-group;font-weight:bold;"> | |
| <tr> | |
| ................ | |
| </tr> | |
| </THEAD> | |
| <tr> | |
| <td clas="trClass"> | |
| ...... | |
| </td> | |
| <td clas="trClass"> | |
| ...... | |
| </td> | |
| </tr> | |
| </table> | |
| <input type="button" name="goBack" class="Btn04" value="回前一頁" onclick="history.go(-1);" /> | |
| </body> | |
| </html> | |
沒有留言:
張貼留言