css 在html到pdf格式的每一页重复用户信息

jutyujz0  于 2023-03-05  发布在  其他
关注(0)|答案(1)|浏览(158)

我正在使用NReco PdfGenerator开发客户声明。为HTML准备,然后转换为PDF。在生成的PDF中有用户信息部分和声明部分。

目前,当记录数量增加时,报表部分会重复到其他页面,用户信息部分只显示在第一页。但我需要用户信息部分也在每页重复。
这是我的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>

和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;
        }

除此之外,我还需要页码显示在用户信息部分的页码字段中。
你能帮忙吗?TIA。
我将两者都保留在一个Div中,并添加了

.divRepeat{
            display: table-header-group;
        }

但没有达到预期效果。

lp0sw83n

lp0sw83n1#

首先,我建议避免使用嵌套表格(在外层表格的单元格内),因为wkhtmltopdf只能在外层表格级别正确处理分页符。要避免在单元格内分页,请使用page-break-inside:avoid
要重复表格的标题行,只需将标题行换行,并将其用于“数据”行。
要在每一行上呈现“用户信息部分”,您可以:
变体1:尝试将此内容包含到smth中,如下所示:

<thead>
  <tr>
    <td colspan="4">User information Section ...</td>
  </tr>
  <tr>
    <th>Cust No</th><th>Date</th> ...
  </tr>
</thead>

变体2:只需在PDF页眉中呈现“用户信息部分”(HtmlToPdfConverter.PageHeaderHtml属性)

相关问题