摘要:[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:在 <head>....</head>區塊裡載入 JS 檔
2nd:利用 DIV 包住你想要讓使用者列印的部份
3rd:在 button 裡增加「onclientclick="printScreen(print_parts)"」,讓使用者按下按鈕時,會去把 print_parts 的 DIV 區塊,傳到 JS 的 printScreen 方法裡。
<head runat="server"> ----------------------- <div id="print_parts">
<asp:Button ID="Button2" runat="server" Text="Button" /> ...... 所有你想放的內容,放於此區塊 </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("<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>"); } |
第三:撰寫觸發事件,在這個例子中,我的觸發動作是寫在 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:
- http://www.blueshop.com.tw/board/show.asp?subcde=BRD200906251557361NY
- http://www.dotblogs.com.tw/jjwei/archive/2010/10/07/18187.aspx
- 載入 Java Script 或 CSS http://blog.darkthread.net/post-2007-02-02-tips-javascript-css.aspx
- http://msdn.microsoft.com/en-us/library/2552td66.aspx
- http://topic.csdn.net/u/20090603/23/cff9d7cd-dcce-4550-9b40-869c08dc3354.html
- http://www.dotblogs.com.tw/jjwei/archive/2010/10/07/18187.aspx
~ End