Search code examples
javahtml-to-pdfflying-saucer

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


I am generating PDF from HTML. I have table in HTML which will spans to multiple pages, When table spans multiple pages I need to display last row border of each page. I don't have row borders for table(which is expected). When table not ended in single page, I should display border of last row. Below is my code samples.

Java Code:

        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>

After HTML to PDF output as below

After HTML to PDF output as below


Solution

  • Just add the following CSS:

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

    From the old Flying saucer user guide, the effect is to "modify the table layout algorithm to repeat table headers and footers on subsequent pages and improve the appearance of cells that break across pages (for example by closing and reopening borders)". As you don't have any header or footer in your table, it just adds the missing border.

    The result looks like this:

    Image of PDF with page break