javascript 打印 Gridview - 如何使用分页符在每页上打印 n 行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18029900/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Printing a Gridview - how to print n rows on each page using page break
提问by Jameem
I have a gridview with 30 rows.I want to print it in 3 pages with 10 rows each.I have tried this code.
我有一个 30 行的 gridview。我想把它打印成 3 页，每页 10 行。我试过这个代码。
foreach (GridViewRow row in GridView1.Rows)
{
if (row.RowIndex % 10 == 0 && row.RowIndex != 0)
{
row.Attributes["style"] = "page-break-after:always;";
}
}
But it prints the whole page without any page breaks.I used to call print function using javascript(shown below).
但它打印了整个页面而没有任何分页符。我曾经使用 javascript 调用打印函数（如下所示）。
function PrintGridData() {
var prtGrid = document.getElementById('<%=GridView1.ClientID %>');
prtGrid.border = 0;
//GridView1.Attributes(style) = "page-break-after:always"
var prtwin = window.open('', 'PrintGridViewData', 'left=100,top=100,width=1000,height=1000,tollbar=0,scrollbars=1,status=0,resizable=1');
prtwin.document.write(prtGrid.outerHTML);
prtwin.document.close();
prtwin.focus();
prtwin.print();
prtwin.close();
}
Help???
帮助？？？
Regards...
问候...
I am showing my complete markup below..pls check it..
我在下面展示了我的完整标记..请检查它..
<%@ Page Title="About Us" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="About.aspx.cs" Inherits="WebApplication2.About" EnableEventValidation="false" %>
<%@ Register assembly="Shared.WebControls" namespace="Shared.WebControls" tagprefix="cc1" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
About
</h2>
<script type="text/javascript">
function PrintGridData() {
var prtGrid = document.getElementById('<%=ReportGridView1.ClientID %>');
//window.print();
prtGrid.border = 0;
//GridView1.Attributes(style) = "page-break-after:always"
var prtwin = window.open('', 'PrintGridViewData', 'left=100,top=100,width=1000,height=1000,tollbar=0,scrollbars=1,status=0,resizable=1');
prtwin.document.write(prtGrid.outerHTML);
prtwin.document.close();
prtwin.focus();
prtwin.print();
prtwin.close();
}
</script>
<p>
<asp:Button ID="Button1" runat="server" Text="Button"
onclick="Button1_Click" OnClientClick="PrintGridData()"/>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px"
CellPadding="4" DataKeyNames="ID" DataMember="DefaultView"
ForeColor="Black" GridLines="None"
ShowFooter="True" style="margin-left: 0px; margin-right: 0px; margin-top: 3px;"
Width="965px"
ShowHeaderWhenEmpty="True"
EnableTheming="True" onrowcreated="GridView1_RowCreated"
onrowdatabound="GridView1_RowDataBound">
<AlternatingRowStyle BackColor="White" BorderStyle="Solid" />
<Columns>
<asp:TemplateField ConvertEmptyStringToNull="False" HeaderText="Select">
<ItemTemplate>
<asp:CheckBox ID="chkrow" runat="server" AutoPostBack="True"
TabIndex="1" ToolTip="Select" />
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="chkhead" runat="server" />
</HeaderTemplate>
</asp:TemplateField>
<asp:CommandField ButtonType="Button" HeaderText="Edit" ShowEditButton="True">
<ControlStyle CssClass="classname" />
</asp:CommandField>
<asp:TemplateField HeaderText="First Name">
<ItemTemplate>
<asp:Label ID="lblfirstname" runat="server" Text='<%# Eval("First_name") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txteditfirstname" runat="server"
Text='<%# Eval("First_name") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Second Name">
<ItemTemplate>
<asp:Label ID="lblsecondname" runat="server" Text='<%# Eval("Second_name") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txteditsecondname" runat="server"
Text='<%# Eval("Second_name") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="DOB">
<ItemTemplate>
<asp:Label ID="lbldob" runat="server" Text='<%# Eval("DOB") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txteditdob" runat="server" Text='<%# Eval("DOB") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address">
<ItemTemplate>
<asp:Label ID="lbladdress" runat="server" Text='<%# Eval("Address") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txteditaddress" runat="server" Text='<%# Eval("Address") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="PIN">
<EditItemTemplate>
<asp:TextBox ID="txteditpin" runat="server" Text='<%# Eval("PIN") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblpin" runat="server" Text='<%# Eval("PIN") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Contact No">
<ItemTemplate>
<asp:Label ID="lblcontactno" runat="server" Text='<%# Eval("Contact_no") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txteditcontactno" runat="server"
Text='<%# Eval("Contact_no") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="E-mail">
<ItemTemplate>
<asp:Label ID="lblemail" runat="server" Text='<%# Eval("E_mail")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txteditemail" runat="server" Text='<%# Eval("E_mail") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#CCCC99" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<PagerSettings Visible="False" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="#CE5D5A" CssClass="SelectedRowStyle"
Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FBFBF2" BorderStyle="Double" />
<SortedAscendingHeaderStyle BackColor="#848384" />
<SortedDescendingCellStyle BackColor="#EAEAD3" />
<SortedDescendingHeaderStyle BackColor="#575357" />
</asp:GridView>
</p>
Help???
帮助？？？
回答by surfmuggle
CSS page-break-after not working cross browser
CSS 分页符后无法跨浏览器工作
I tested page-break-after: always;with ie10 and firefox 22 - it works in both; in Chrome 30 it does not work. So its difficult to tell why it does not work for you in firefox 22.
我page-break-after: always;用 ie10 和 firefox 22进行了测试- 它适用于两者；在 Chrome 30 中它不起作用。所以很难说为什么它在 Firefox 22 中对你不起作用。
If your user base is mostly IE and firefox (like in our company). This will work:
如果您的用户群主要是 IE 和 firefox（例如在我们公司）。这将起作用：
.pagebreak {
page-break-after: always;
}
Apparently the support for css pagebreak is not ideal:
显然对 css pagebreak 的支持并不理想：
A search for chrome issueslead me to issue 99124 - Printed table content does not respect page-break CSS properties; reported on Oct 4, 2011 and still untriaged: Confirmed, not reviewed for priority and assignment. It seems that printing is just not important.
一个镀铬的问题搜索导致我的问题99124 -印刷表格内容不尊重分页CSS属性; 于 2011 年 10 月 4 日报告但仍未分类：Confirmed, not reviewed for priority and assignment. 似乎印刷并不重要。
Adding this css did not help either:
添加此 css 也无济于事：
@media print
{
table tr.pagebreak {page-break-after:always}
}
Updated - a patchy workaround using Javascript
更新 - 使用 Javascript 的不完整解决方法
A workaround could be to split the table up to many tables - for each page. This demo breaks a single table into n tablesafter the user clicks the button. You need this css hr {page-break-after: always;}as well.
解决方法可能是将表格拆分为多个表格 - 对于每个页面。此演示在用户单击按钮后将单个表分解为 n 个表。你也需要这个 css hr {page-break-after: always;}。
I updated the javascript to include a <hr />between each page to even force chrome to add a page break.
我更新了 javascript 以<hr />在每个页面之间包含一个，甚至强制 chrome 添加分页符。
function printTable(){
var tables = createTables(2);
$("#printTables").html(tables);
}
function createTables(rowsPerTable){
var rowsInParentTable = $( "tbody tr" ).toArray();
var subTable = "<table>", subRows=[], sr = 0;
for(i=0; i < rowsInParentTable.length; i++){
subTable += "<tr>" + rowsInParentTable[i].innerHTML + "</tr>";
if( i % rowsPerTable === 0 && (i > rowsPerTable || i +1 > rowsPerTable ){
subTable += "</table> <hr /><table>";
}
}
return subTable;
}
And the html
和 html
<div>
<table id="sourceTable">
<tbody>
<tr><td>1 Browser</td>
<td>Version</td>
<td>Support for 'page-break-after' </td></tr>
<tr><td>2 Internet Explorer</td>
<td>10</td><td>works for table rows</td></tr>
<tr><td>3 Fire Fox</td><td>22</td>
<td>works for table rows</td></tr>
<tr><td>4 Chrome</td><td>30</td>
<td>does not work</td></tr>
<tr><td>5 Safari</td><td>?</td><td>?</td></tr>
<tr><td>6 Opera</td><td>?</td><td>?</td></tr>
</tbody>
</table>
<button onclick="printTable()">print table</button>
</div>
<div id="printTables">
</div>
My recomendation
我的推荐
I would create a seperate aspx-page that takes care of the printing page. This way you would have full server side control and can use a repeater to create exactly the html output you need.
我会创建一个单独的 aspx 页面来处理打印页面。通过这种方式，您将拥有完整的服务器端控制，并且可以使用转发器准确地创建您需要的 html 输出。
回答by Jameem
if (!IsPostBack)
{
var sb = new StringBuilder();
string s;
show();
for (int i = 0; i < GridView1.PageCount; i++)
{
GridView1.FooterRow.Visible = false;
GridView1.PageIndex = i + 1;
sb.Clear();
GridView1.RenderControl(new HtmlTextWriter(new StringWriter(sb)));
s = sb.ToString();
Response.Write(s);
if (i != GridView1.PageCount - 1)
{
Response.Write("<p></p>");
}
show();
}
GridView1.Visible = false;
}
public override void VerifyRenderingInServerForm(Control control)
{
}
I have used this method to solve the case..I have applied paging to the **gridview** and it works!!!
