人生七劃: [ASP.NET] 列印網頁內容

2011年8月7日星期日

[ASP.NET] 列印網頁內容

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

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

這個方法也可以用來只列印畫面上某些內容、元件，他是透過 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

沒有留言:

張貼留言

訂閱：張貼留言 (Atom)

2011年8月7日 星期日

[ASP.NET] 列印網頁內容

沒有留言:

張貼留言

2011年8月7日星期日