简体   繁体   中英

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

HTML到PDF输出后如下

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:

带有分页符的 PDF 图像

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM