2015年3月19日 星期四

JS列印語法

各種列印按鈕參考，單純列印時原則上會用第一種，第二種在預覽頁應該再做個列印按鈕較為洽當。

參考網站


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">&nbsp;</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>”);
}
張貼者： 於
標籤： , , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)