example_html.adoc

Sample HTML/PDF Report with Paging, Headers and Footers

Let’s imagine that we now want to create a report with landscape orientation, page numbers, fixed header and footer on each page, configured using special CSS rules and properties. The output format is HTML exported to PDF.

This sample report with its demo project is also available on CUBA GitHub.

1. Data model

   Our report will display information on the Client entity. It contains two String attributes: title and summary, we will use them in our report structure.

   link:../../../source/examples_html.java[role=include]

2. Creating a report

   Let’s create a simple report without parameters. The JPQL query will select all clients with their local attributes: title and summary.

   

   Figure 1. Report data structure

3. Report template.

   Now let’s create the report template file. Here we define header and footer blocks that will be printed on each PDF page. Also we use special page-break-before: always CSS property. It will generate a page break before each client info block.

   As you can see, we use FreeMarker statements to insert data to our template. See complete FreeMarker reference here: https://freemarker.apache.org/docs/.

   link:../../../source/examples_html.html[role=include]

4. CSS rules

   We will use the following CSS code to tune our PDF page representation:

   link:../../../source/examples_html_1.css[role=include]

   This CSS code will set header/footer positions:

   link:../../../source/examples_html_2.css[role=include]

   After that we need to fix paddings of the main content to prevent content and header/footer overlapping:

   link:../../../source/examples_html_3.css[role=include]

   So, the complete paging-template.html file will look as below:

   link:../../../source/examples_html_5.html[role=include]

5. Upload the template file and run the report.

   

   Figure 2. Template editor

   As you can see, the report contains the title page and page breaks before each client’s page. There are headers and footers on each page as well.

   

   Figure 3. Report result