Flyingsaucer HTML 到 PDF：HTML Table 如果 table 跨越多个页面，每页缺少行边框

Question

我正在从 HTML 生成 PDF。我在 HTML 中有 table，它将跨越多个页面，当 table 跨越多个页面时，我需要显示每个页面的最后一行边框。我没有 table 的行边框（这是预期的）。当 table 没有在单页结束时，我应该显示最后一行的边框。下面是我的代码示例。

Java代码：

        String html = ""
        ITextRenderer renderer = new ITextRenderer();
        renderer.setDocumentFromString(html);
        renderer.layout();
        renderer.createPDF(outputStream);

HTML:

<html>
<head>
<style>

@page{

    @bottom-left {                 
        content: element(footer);  
        vertical-align: top;
        padding-top: 10px;
    }

    @top-right {
        content: element(header); 
        vertical-align: bottom;
        padding-bottom: 10px;
    }

    size: A4 portrait;
    margin-top:5.5cm; 
    margin-left:3cm; 
    margin-right:2cm; 
    margin-bottom:3.3cm; 
}

div.header {
    display: block;                     
    position: running(header);
    border-bottom: 1px solid black;
}

div.footer {
    margin-top: 0.5cm;
    display: block;
    position: running(footer);
    border-top: 1px solid black; 
}

div.content {
    display: block;
    width: 15.4cm; 
    text-align: justify;
}

#pagenumber:before {
    content: counter(page);
}

#pagecount:before {
    content: counter(pages);
}

</style>
</head>
<body>

    <div class="header">
        This is the header that will repeat on every page at top
    </div>

    <div class="footer" >
        <p>This is the footer that will repeat on every page at bottom</p>
        <p>Page <span id="pagenumber"></span> of <span id="pagecount"></span></p>
    </div>

    <div class="content">
        <table
            style="height: 250px; margin-top: 50px; border: 1px solid black"
            cellpadding="0" cellspacing="0">
            <tr class="heading" style="height: 1px;">
                
                <td>Item</td>
                <td>Quantity</td>
                <td style="width:100px">Price</td>
                <td style="text-align: right; padding-right: 20px;">Summa</td>
            </tr>

            <tr class="item" style="height: 24px; ">
                
                <td>Row 1</td>
                <td>19,75</td>
                <td style="width:100px">10,00</td>
                <td style="text-align: right; padding-right: 20px;">197,50</td>
            </tr>

            <tr class="item" style="height: 24px; ">
                
                <td>Row 2</td>
                <td>19,75</td>
                <td style="width:100px">10,00</td>
                <td style="text-align: right; padding-right: 20px;">197,50</td>
            </tr>

            <!-- 100 Rows -->
            
            <tr class="item" style="height: 24px; ">
                
                <td>Row N</td>
                <td>19,75</td>
                <td style="width:100px">10,00</td>
                <td style="text-align: right; padding-right: 20px;">197,50</td>
            </tr>


        </table>
    </div>
</body>
</html>

HTML后PDF输出如下

Answer 1

只需添加以下内容CSS:

    table {
        -fs-table-paginate: paginate;
        border-spacing: 0;
    }

来自旧的Flying saucer user guide，其效果是“修改table布局算法以在后续页面上重复table页眉和页脚并改善跨单元格的外观页面（例如通过关闭和重新打开边界）”。由于您的 table 中没有任何页眉或页脚，它只是添加了缺失的边框。

结果如下所示：

Flyingsaucer HTML 到 PDF：HTML Table 如果 table 跨越多个页面，每页缺少行边框

Flyingsaucer HTML To PDF: HTML Table row border missing for each page if table spans multiple pages

java

html-to-pdf

flying-saucer