網頁列印語法 @ 愛貓‧愛吃‧愛攝影

ABOUT：想做一各A網頁,裡頭有一各列印按鈕,當我按下後,能列印出B網頁的內容

利用框架(一般框架or內置框架都可以，但須指派id)
下面為範例：

假設有個內置框架，HTML為：
<iframe name="PrintFrame" id="PrintData" src="aaa.htm">

而A網頁，給他一個暗鈕，當使用者按下按鈕之後，就會跳出列印對話框，但列印出來的內容是B網頁的資料. . .
<input type=button onClick="PrintData.focus(); print();" >

ABOUT：用 Java Script 列印網頁中指定的圖層

因為不希望把網頁中所有的東西都列印，尤其是有頁框 or MasterPage的時候，用以下語法可指定僅列印網頁中某一圖層內容(<DIV>)
分為三個部份：

一、網頁 print.aspx，加入一個HTML產生的button，並在onclick指定欲執行的JS片段

<input id="btnPrint" type="button" value="列印成績" onclick="printScreen(printlist)"/>

接著新增一個圖層標籤，在此命名為 printlist

<div id="printlist">
            <table style="width: 750px">
            <tr>
                <td>
                    欄位一
                </td>
                <td style="width: 150px">
                    欄位二</td>
            </tr>
            <tr>
                <td colspan="2">
                    可以把GirdView放在這裡來列印
                </td>
            </tr>
            <tr>
                <td colspan="2">
                     </td>
            </tr>
            <tr>
                <td colspan="2">
                    表尾</td>
            </tr>
            </table>
    
</div>

二、網頁程式 print.aspx.cs，在Page_Load時載入JS檔
protected void Page_Load(object sender, EventArgs e) { Page.ClientScript.RegisterClientScriptInclude("myPrint", "Print.js"); } 三、JS檔內容

function printScreen(printlist)
{
var value = printlist.innerHTML;
var printPage = window.open("","printPage","");
printPage.document.open();
printPage.document.write("<HTML><head></head><BODY onload='window.print();window.close()'>");
printPage.document.write("<PRE>");
printPage.document.write(value);
printPage.document.write("</PRE>");
printPage.document.close("</BODY></HTML>");
}

ABOUT：自動列印與分頁列印

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

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

這個指令是:

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

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

列印 Html 網頁時的強制換頁方式

透過 CSS 的 Pagebreak 來處理列印 Html 強制換頁。

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

於文件加入語法 :

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

ABOUT：Java Script呼叫IE列印與預覽列印
(區塊列印集區塊預覽列印)

整頁列印:
html部分:
<INPUT TYPE="button" value="整頁列印" onclick="print()">

Javascript部分:
N/A

部分列印(只列印div包起來的網頁):
html部分:
<div id="block"> <P><img id=”ruten” name=”ruten” SRC=”http://www.ruten.com.tw/imgs/2008/logo.gif”></P> </div> <input type=”button” value=”部分列印” onclick=”printScreen(block)”>

Javascript部分:
//列印div包起來的部分並且列印完畢後自動關閉列印網頁
function printScreen(block){ var value = block.innerHTML; var printPage = window.open(”",”printPage”,”"); printPage.document.open(); printPage.document.write(”<HTML><head></head><BODY onload=’window.print();window.close()’>”); printPage.document.write(”<PRE>”); printPage.document.write(value); printPage.document.write(”</PRE>”); printPage.document.close(”</BODY></HTML>”); }

整頁預覽列印：
html部分:
<OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height=0 id=wb name=wb width=0></OBJECT> <INPUT TYPE=”button” value=”整頁預覽” onclick=”javascript:wb.execwb(7,1)”>

Javascript部分:
N/A

部分預覽列印(只預覽div包起來的部份)：
html部分:
<div id="block"> <P><img id=”ruten” name=”ruten” SRC=”http://www.ruten.com.tw/imgs/2008/logo.gif”></P></div> <input type=”button” value=”區塊預覽” onclick=”previewScreen(block)”>

Javascript部分:
//預覽div包起來的部分並且列印完畢後自動關閉列印網頁
function previewScreen(block){ var value = block.innerHTML; var printPage = window.open(”",”printPage”,”"); printPage.document.open(); printPage.document.write(”<OBJECT classid=’CLSID:8856F961-340A-11D0-A96B-00C04FD705A2′ height=0 id=wc name=wc width=0></OBJECT>”); printPage.document.write(”<HTML><head></head><BODY onload=’javascript:wc.execwb(7,1);window.close()’>”); printPage.document.write(”<PRE>”); printPage.document.write(value); printPage.document.write(”</PRE>”); printPage.document.close(”</BODY></HTML>”); }