2013-07-10

Java Script Window Print-另開視窗方式列印

Web表單設計時還蠻常需要用到列印的,一般都會用Reporting Service

這裡教你用Java Script的方式,另開一個視窗列印表單,順便幫自己記錄程式碼^^


先用DIV框定範圍
<div id="print" align="center">
  表單內HTML程式碼...
 .
 .
 .
 </div>


在Button加入列印OnClientClick事件
<asp:Button ID="Button7" runat="server" Text="列印" OnClientClick="myPrint(document.getElementById('print'));return false;" />


加入JavaScript列印事件
<script type="text/javascript">
        function myPrint(obj) {
            //打開一个新窗口newWindow
            var newWindow = window.open("打印窗口", "_blank");
            //要打印的div的内容
            var docStr = obj.innerHTML;
            newWindow.document.write('<div align="center"><asp:Label ID="lb_printTitle" runat="server" Font-Size="X-Large" style="font-family: 微軟正黑體; font-weight: 700" Text="部門領用統計表"></asp:Label></div>');
            //打印内容寫入newWindow文檔
            newWindow.document.write(docStr);
            //關閉文檔
            newWindow.document.close();
            //調用打印機
            newWindow.print();
            //關閉newWindow頁面
            newWindow.close();
        }
     </script>


畫面(瀏覽器:IE10)
表單

另開列印視窗


注意
因為另開視窗是一個全新的視窗,所以第一次用可能會發現為什麼格式什麼全跑了
那是因為CSS沒有一起過去,所以在newWindow.document.write(.......)要把CSS一起
傳過去,不然就是寫在表單中,這樣出現的表單才會和你想要的一樣。

2 則留言:

  1. 請問一次要印出兩段DIV ID不同的區段,該怎麼寫?謝謝

    回覆刪除
    回覆
    1. 注意這個:newWindow.document.write(docStr);
      再另外加一個你要印的區段就可以印兩個了

      刪除

您的寶貴建議是我前進的動力!