Convert HTML Template to PDF using itext7 with dynamic header & footer

Question

I've tried to use the below HTML template to convert it to PDF using iText7 but both header and footer are not binding to their intended position. used example I'm trying to avoid @Page header and footer properties since I'm trying to accomplish fitting dynamic content in both sections with extended space more than 3 rows in each.

iText code and result:

ConverterProperties properties = new ConverterProperties();
//properties.setFontProvider(fontProvider);
properties.setMediaDeviceDescription(new MediaDeviceDescription(MediaType.PRINT));
PdfWriter writer = new PdfWriter("out.pdf");
PdfDocument pdf = new PdfDocument(writer);
pdf.setTagged();
PageSize pageSize = PageSize.LETTER;
pdf.setDefaultPageSize(pageSize);

OutlineHandler outlineHandler = OutlineHandler.createStandardHandler();
properties.setOutlineHandler(outlineHandler);

//html template (templateOutput)
HtmlConverter.convertToPdf(templateOutput, pdf, properties);
byte[] pdfData = byteArrayOutputStream.toByteArray();
pdf.close();

The second page without header and footer First Page

Please any suggestions to resolve the issue? Thank you

You should use @page media selector and running elements in CSS to exclude an element from the main flow and include it into a header — Alexey Subach
Thank you...I used running elements previously & it worked fine. However, the content in both sections limited to only one line. I'm trying to accomplish fitting at least 3 lines in the header and footer sections dynamically. Any alternatives? — Semi
you can use running elements with block-level elements (div, paragraphs) perfectly fine and it should give you the desired result — Alexey Subach
I've tried it with div...still the content shows only 2 lines although I've added 3 lines and specify the div height as 15% of the page. — Semi
you should also specify the height of the header, it's specified with margin-top CSS declaration: @page { margin-top: 200px; } — Alexey Subach

Alexey Subach Alexey Subach · Accepted Answer · 2020-03-27T19:59:27

Here is an example of HTML that is correctly processed by pdfHTML and multiline header is displayed fully at the top of the page as expected:

<!DOCTYPE html>
<html>

<head>
    <style>
        #header {
            position: running(header);
        }

        @page {
            margin-top: 100px;
            @top-center {
                content: element(header);
            }
        }
    </style>
</head>

<body>

<div id="header">Header line 1<br/>Header line 2<br/>Header line 3</div>

<p>Content of the page</p>

</body>
</html>

Page looks as follows in the resultant PDF:

Convert HTML Template to PDF using itext7 with dynamic header & footer

1 Answers