參考網站
ABOUT:想做一各A網頁,裡頭有一各列印按鈕,當我按下後,能列印出B網頁的內容
利用框架(一般框架or內置框架都可以,但須指派id)
下面為範例:
下面為範例:
假設有個內置框架,HTML為:
<iframe name="PrintFrame" id="PrintData" src="aaa.htm">
<iframe name="PrintFrame" id="PrintData" src="aaa.htm">
而A網頁,給他一個暗鈕,當使用者按下按鈕之後,就會跳出列印對話框,但列印出來的內容是B網頁的資料. . .
<input type=button onClick="PrintData.focus(); print();" >
<input type=button onClick="PrintData.focus(); print();" >
ABOUT:用 Java Script 列印網頁中指定的圖層
因為不希望把網頁中所有的東西都列印,尤其是有頁框 or MasterPage的時候,用以下語法可指定僅列印網頁中某一圖層內容(<DIV>)
分為三個部份:
一、網頁 print.aspx,加入一個HTML產生的button,並在onclick指定欲執行的JS片段
分為三個部份:
一、網頁 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檔內容
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() 印表機交談視窗指令,
更能讓網頁的列印方便許多!
如果瀏覽者打算列印你的網頁, 或是你的網頁利用資料庫處理了一些資料,
準備製成報表, 這時便會遇到分頁的問題。
怎麼樣讓網頁於列印時自動分成適當的頁數呢?
其實有個簡單的指令, 馬上能讓你達成心願。
這個指令是:
<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
N/A
部分列印(只列印div包起來的網頁):
html部分:
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包起來的部分並且列印完畢後自動關閉列印網頁
//列印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部分:
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
N/A
部分預覽列印(只預覽div包起來的部份):
html部分:
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包起來的部分並且列印完畢後自動關閉列印網頁
//預覽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>”);
}