2011年8月7日 星期日

[ASP.NET] 列印網頁內容


 [怎麼印出 Gridview 的內容?]、「怎麼印畫面上部份的內容呢?」甚至比較簡單的「我怎麼設計一個按鈕,讓使用者可以列印網頁畫面?」要達到這個功能該怎麼做呢?
當我們平常在列印的時候,會跳出印表機的視窗讓我們決定要以哪一台 printer 印出我們的內容,那請思考一下真正負責印出來的印表機是位於 Server 端?還是 Client 呢?
答案當然是 Client 端囉~所以程式就必須將要列印的內容丟到 Client 端的印表機去做輸出的動作,不過......ㄝ~不用想的那麼麻煩,底下的使用方式很簡單的。
方法一:直接編寫 button 內容,印出網頁畫面(就是最上面那個圖示的作法)
方法二:寫一個JS檔,搭配前端 button 的觸發,列印指定 DIV 的區塊
方法三:寫個專門用來列印的aspx,裡面只有一個GridView沒有其他東西,再用QueryString傳遞全部、分頁、每頁筆數、第幾頁,然後在該頁利用 JavaScript 的 Windows.print 印出來(Topcat 提供
--------------------------------------------------------------------------------
方法一:直接編寫 button 內容,印出網頁畫面
>>> 這個方法適用直接列印整個網頁的內容,程式碼也很簡單,直接在前端 aspx 裡放入這些按鈕的定義


<object  id=WebBrowser  classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2  height=0  width=0 VIEWASTEXT>object>
<
input  type=button  value=
列印     onclick=document.all.WebBrowser.ExecWB(6,1) id="Button2"name="Button2">
<
input  type=button  value=
直接列印 onclick=document.all.WebBrowser.ExecWB(6,6) id="Button3"name="Button3">
<
input  type=button  value=
頁面設置 onclick=document.all.WebBrowser.ExecWB(8,1) id="Button4"name="Button4">
<
input  type=button  value=
列印預覽 onclick=document.all.WebBrowser.ExecWB(7,1) id="Button5"name="Button5">

貼上所需的程式碼,就可以得到你需要的列印結果。

這個方法也可以用來只列印畫面上某些內容、元件,他是透過 CSS 的 Class 方式,指定到不同 Class ,在到 Class 裡定義顯示(印出)的方法,「請參考」。
================================================
方法二:寫一個JS檔,搭配前端 button 的觸發,列印指定 DIV 的區塊
第一:在前端畫面的 aspx 中,增加下列三項
1st:在 ....區塊裡載入 JS 檔
2nd:利用 DIV 包住你想要讓使用者列印的部份
3rd:在 button 裡增加「
onclientclick="printScreen(print_parts)"」,讓使用者按下按鈕時,會去把 print_parts 的 DIV 區塊,傳到 JS 的 printScreen 方法裡。

<head runat="server">
<
title>列印頁面測試title>
<
script type="text/javascript"  src="print.js">script>
head>

-----------------------
<div id="print_parts">
<asp:Button ID="Button2" runat="server" Text="Button" />
<
asp:GridView ID="GridView2" runat="server"> asp:GridView>

...... 所有你想放的內容,放於此區塊
div>
--------------------------
<asp:Button ID="Button1" runat="server" Text="Button"Height="61px" onclientclick="printScreen(print_parts)"Width="248px" onclick="Button1_Click" />

第二:JS 檔案 (print.js) 的內容,裡頭有一個 function(printScreen)

function printScreen(printlist)
{
  var value = printlist.innerHTML;
  var printPage = window.open("""Printing...""");
  printPage.document.open();
  printPage.document.write("");
  printPage.document.write("
");
  printPage.document.write(value);
  printPage.document.write("
"
);
  printPage.document.close("");
}

第三:撰寫觸發事件,在這個例子中,我的觸發動作是寫在 button1 的 click 事件,當中他會去呼叫了 ClientScript.RegisterClientScriptInclude 再以呼叫 print.js
// Registers the client script with the Page object using a key and a URL, which enables the script to be called from the client.

protected void Button1_Click(object sender, EventArgs e)
{
    Page.ClientScript.RegisterClientScriptInclude("myPrint","print.js");
    // public void RegisterClientScriptInclude(string key, string url)    // http://msdn.microsoft.com/en-us/library/2552td66.aspx}

執行的畫面~按下按鈕後會跳出 DIV 裡的內容到另一個視窗去,並且自動跳出讓使用者選印表機的畫面,按下確定/取消 後,也會自動的關閉這個跳出來的視窗,回到原本呼叫的畫面中


Reference:

~ End

沒有留言:

張貼留言