javaflying-saucer

Table of content java flying saucer?


I created an audit report using flying saucer to convert from HTML to pdf. And I want to create an table of content in the first page to know titleProduct belong which page? How do I do it?

<div th:each="productGroup: ${productGroups}">
    <table class="audit-table">
        <thead>
        <tr class="pg-node pg-title">
            <td class="titleProduct" colspan="3">[[${productGroup.getPgNumber()}]] - [[${productGroup.getPgName()}]]</td>
        </tr>
        <tr class="pg-node row">
            <th>BRAND</th>
            <th>MODEL</th>
            <th>FEATURE TEXT</th>
            <th>ARTICLE</th>
        </tr>
        </thead>
        <tbody>
        <th:block th:each="audit: ${productGroup.getPdfAuditColumns()}">
            <tr>
                <td th:text="${audit.getBrand()}"></td>
                <td th:text="${audit.getModel()}"></td>
                <td th:text="${audit.getFeatureText()}"></td>
                <td th:text="${audit.getArticle()}"></td>
            </tr>
        </th:block>
        </tbody>
    </table>
</div

Solution

  • You can create table of content using CSS cross references. This is supported by flying-saucer.

    Here is a working example:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style>
            div.newbr {page-break-before: always}
            #table-of-content a::after {content: " on page " target-counter(attr(href), page);}
        </style>
    </head>
    <body>
    
    <div id="table-of-content">
        <a href="#product1">Product 1</a><br/>
        <a href="#product2">Product 2</a><br/>
        <a href="#product3">Product 3</a><br/>
    </div>
    
    <div id="product1" class="newbr"><h1>Product 1</h1></div> <!-- product 1 on page 2 -->
    <div id="product2"><h1>Product 2</h1></div>               <!-- product 2 also on page 2 -->
    <div id="product3" class="newbr"><h1>Product 3</h1></div> <!-- product 3 on page 3 -->
    
    
    </body>
    </html>