BS下实现打印gridview
转自:http://blog.csdn.net/qwlzxx/article/details/51071986
前言:
最近公司让做的工作中包含一个打印功能,我用的是gridview,将其从页面直接打印下来。
具体解决方案如下:
思路:
将gridview包含到一个div中,然后将div的html提交到另一个页面,最终打印这个页面。
页面:
gridview嵌套在div中的html代码:
- <div id="printdiv">
- <h4 style="width: 699px; text-align:Center"> 钥匙借用登记表</h4>
- <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
- Height="182px" Width="700px" DataKeyNames="ID" AllowPaging="True"
- OnRowDeleting="GridView1_RowDeleting" >
- <Columns>
- <asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" InsertVisible="False" ReadOnly="True" Visible="False" />
- <asp:BoundField DataField="Date" HeaderText="日期时间" SortExpression="Date" />
- <asp:BoundField DataField="Department" HeaderText="借用部门" SortExpression="Department" />
- <asp:BoundField DataField="Reason" HeaderText="借用事由" SortExpression="Reason" />
- <asp:BoundField DataField="Amount" HeaderText="借用数量" SortExpression="Amount" />
- <asp:BoundField DataField="Borrower" HeaderText="借用人" SortExpression="Borrower" />
- <asp:BoundField DataField="Tel" HeaderText="联系电话" SortExpression="Tel" />
- <asp:BoundField DataField="Watch" HeaderText="值班人" SortExpression="Watch" />
- <asp:CommandField ShowDeleteButton="True"/>
- </Columns>
- </asp:GridView>
- </div>
JS代码:
- <script type="text/javascript">
- function printPage() {
- var newWin = window.open('printer', '', '');
- var titleHTML = document.getElementById("printdiv").innerHTML;
- newWin.document.write(titleHTML);
- newWin.document.location.reload();
- newWin.print();
- newWin.close();
- }
- </script>
打印按钮调用JS:
- <input id="Button6" type="button" value="打印" onclick="printPage()" />
运行效果
至此,打印功能就可以实现了,运行一下看效果呗。
点击打印,跳转页面,噔噔……
在这里为了演示效果方便,打印选择在了PDF中生成。最终效果图:
期待:
不错吧,但细心的同志都发现了,删除的那一列在打印的时候消失了,想知道怎么实现的吗?期待下篇博客,不见不散哦。