Repeat user info on every page in html to pdf
I am using NReco PdfGenerator for developing customer statement. For that html is prepared and then converted to PDF. In the generated pdf there is User Information section and Statement section.
Currently Statement section is repeated to other pages when number of records increases and User Information section is displayed only in very first page. But I need the User Information Section also to be repeated in every pages.
This is my html
<b>User Information Section</b>
<table style="border-collapse: collapse; width: 100%; border-style: none;" cellspacing="0" cellpadding="0">
<tbody>
<tr style="padding-right: 15px; font-family: Cairo ; font-size: 12pt;">
<td style="width:">
<table>
<tbody>
<tr>
<td style="font-size:11pt;font-weight:bold">Name</td>
<td>:</td>
</tr>
</tbody>
</table>
</td>
<td style="width:">
<div style="text-align: left;font-size: 11pt;padding-left: 10px;padding-right: 10px;font-weight:bold">
jeorge
</div>
</td>
</tr>
<tr style="padding-right: 15px; font-family: Cairo ; font-size: 12pt;">
<td style="width:">
<table>
<tbody>
<tr>
<td style="font-size:11pt;font-weight:bold">Cus NO</td>
<td>:</td>
</tr>
</tbody>
</table>
</td>
<td style="width:">
<div style="text-align: left;font-size: 11pt;padding-left: 10px;padding-right: 10px;font-weight:bold">
445026
</div>
</td>
<td style="width:">
<table>
<tbody>
<tr>
<td style="font-size:11pt;font-weight:bold">Date</td>
<td>:</td>
</tr>
</tbody>
</table>
</td>
<td style="width: ">
<div style="text-align: left;font-size: 11pt;padding-left: 10px;padding-right: 10px;font-weight:bold">
30/11/22
</div>
</td>
</tr>
<tr style="padding-right: 15px; font-family: Cairo ; font-size: 12pt;">
<td style="width:">
<table>
<tbody>
<tr>
<td style="font-size:11pt;font-weight:bold">Invoice No</td>
<td></td>
<td>:</td>
</tr>
</tbody>
</table>
</td>
<td style="width:">
<div style="text-align: left;font-size: 11pt;padding-left: 10px;padding-right: 10px;font-weight:bold">
1094093
</div>
</td>
<td style="width:">
<table>
<tbody>
<tr>
<td style="font-size:11pt;font-weight:bold"><b>Page No</b></td>
<td>:</td>
</tr>
</tbody>
</table>
</td>
<td style="width: ">
<div id="pageCounter">
<span></span>
</div>
<div id="pageNumbers" style="text-align: left;font-size: 11pt;padding-left: 10px;padding-right: 10px;font-weight:bold">
<div></div>
</div>
</td>
</tr>
</tbody>
</table>
<br />
<b>Statement Section</b>
<table style="border-collapse: collapse;width: 100%;border-width: thin;color:black;margin-top:1px" border="1" bordercolor="black" cellspacing="0" cellpadding="0">
<thead>
<tr style="background-color: #f1f1f1;font-family: Cairo ;color: black;font-size:11pt;font-weight:bold">
<td style="width: 5%; text-align: center; ">
<br /> Cust_No
</td>
<td style="width: 10%; text-align: center;font-size:11pt;font-weight:bold">
<br />Date
</td>
<td style="width: 10%; text-align: center;font-size:11pt;font-weight:bold ">
<br /> Qty
</td>
<td style="width: 10%; text-align: center;font-size:11pt;font-weight:bold">
<br /> Price
</td>
</tr>
</thead>
<tfoot>
<tr>
<td style="width: 10%; border: solid windowtext 1pt; border-top: none;border-right:none; border-color: black;"></td>
<td style="width: 40%; border-top: none; border-left: none;border-right:none; border-bottom: solid windowtext 1pt;border-color: black;"></td>
<td style="width: 15%; border-top: none; border-left: none; border-bottom: solid windowtext 1pt; border-right:none; border-color: black;"></td>
<td style="width: 10%; border-top: none; border-left: none; border-bottom: solid windowtext 1pt; border-right: none;border-color: black;"></td>
</tr>
</tfoot>
<tbody>
<tr>
<tr class="table_cell" style="font-family: Cairo ;font-size:9.5pt;line-height:0.5;">
<td class="table_cell" style="width: 10%;color:black;border-color:black">
676767
</td>
<td class=" table_cell" style="width: 15%;color:black;border-color:black">
01/11/22
</td>
<td class="table_cell" style="width: 10%;text-align:right;color:black;border-color:black">
1
</td>
<td class="table_cell" style="width: 10%;text-align:right;color:black;border-color:black">
290.70
</td>
</tr>
<tr class="table_cell" style="font-family: Cairo ;font-size:9.5pt;line-height:0.5;">
<td class="table_cell" style="width: 10%;color:black;border-color:black">
353535
</td>
<td class=" table_cell" style="width: 15%;color:black;border-color:black">
02/11/22
</td>
<td class="table_cell" style="width: 10%;text-align:right;color:black;border-color:black">
1
</td>
<td class="table_cell" style="width: 10%;text-align:right;color:black;border-color:black">
343.81
</td>
</tr>
</tbody>
</table>
and CSS
body {
margin: 20px;
}
table {
page-break-inside: auto;
}
tr {
page-break-inside: avoid;
page-break-after: auto;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
#content {
flex: 1 1 auto;
}
In addition to this I need page number also to be displayed in the PageNo field of User Information Section.
Could you please help on this ? TIA.
I have kept both in one Div and added
.divRepeat{
display: table-header-group;
}
but didn't work as expected.
First of all, I may recommend to avoid usage of nested tables (<table> inside outer table's cell) at all because wkhtmltopdf is able to handle page breaks correctly only on outer table level. To avoid page breaks inside cells use page-break-inside:avoid.
To repeat table's header row it is enough to wrap header's <tr> with <thead>, and use <tbody> for the 'data' rows.
To render "User information Section" on each row you can:
Variant 1: try to include this content into <thead>, smth like that:
<thead>
<tr>
<td colspan="4">User information Section ...</td>
</tr>
<tr>
<th>Cust No</th><th>Date</th> ...
</tr>
</thead>
Variant 2: Simply render "User Information Section" in the PDF page header (HtmlToPdfConverter.PageHeaderHtml property)