BS下实现打印gridview

转自：http://blog.csdn.net/qwlzxx/article/details/51071986

 

前言：       

       最近公司让做的工作中包含一个打印功能，我用的是gridview，将其从页面直接打印下来。

       具体解决方案如下：

       思路：

       将gridview包含到一个div中，然后将div的html提交到另一个页面，最终打印这个页面。

       页面：

       

       gridview嵌套在div中的html代码：

[html] view plain copy

1. <div id="printdiv">  
2.    <h4 style="width: 699px; text-align:Center"> 钥匙借用登记表</h4>  
3.    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"  
4.    Height="182px" Width="700px" DataKeyNames="ID" AllowPaging="True"  
5.    OnRowDeleting="GridView1_RowDeleting" >  
6.   
7.    <Columns>  
8.      <asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" InsertVisible="False" ReadOnly="True" Visible="False" />  
9.      <asp:BoundField DataField="Date" HeaderText="日期时间" SortExpression="Date" />  
10.      <asp:BoundField DataField="Department" HeaderText="借用部门" SortExpression="Department" />  
11.      <asp:BoundField DataField="Reason" HeaderText="借用事由" SortExpression="Reason" />  
12.      <asp:BoundField DataField="Amount" HeaderText="借用数量" SortExpression="Amount" />  
13.      <asp:BoundField DataField="Borrower" HeaderText="借用人" SortExpression="Borrower" />  
14.      <asp:BoundField DataField="Tel" HeaderText="联系电话" SortExpression="Tel" />  
15.      <asp:BoundField DataField="Watch" HeaderText="值班人" SortExpression="Watch" />  
16.      <asp:CommandField ShowDeleteButton="True"/>  
17.    </Columns>  
18.   </asp:GridView>                                                   
19. </div>  

       JS代码：   

[javascript] view plain copy

1. <script type="text/javascript">      
2.     function printPage() {  
3.          var newWin = window.open('printer', '', '');  
4.          var titleHTML = document.getElementById("printdiv").innerHTML;  
5.          newWin.document.write(titleHTML);  
6.          newWin.document.location.reload();  
7.          newWin.print();  
8.          newWin.close();  
9.     }  
10. </script>  

       打印按钮调用JS：

[html] view plain copy

1. <input id="Button6" type="button" value="打印" onclick="printPage()" />  

     

       运行效果

       至此，打印功能就可以实现了，运行一下看效果呗。

       点击打印，跳转页面，噔噔……

       

          在这里为了演示效果方便，打印选择在了PDF中生成。最终效果图：

         期待：        

        不错吧，但细心的同志都发现了，删除的那一列在打印的时候消失了，想知道怎么实现的吗？期待下篇博客，不见不散哦。