Create a PDF document with a custom header and footer by converting an HTML template using itext7

Question

Create a PDF document with a custom header and footer by converting an HTML template using itext7

I attempted to utilize the following HTML template in an effort to convert it to a PDF using iText7, however, I am facing an issue where both the header and footer are not aligning to their designated positions. You can view the example I used here. I am steering away from using the @Page header and footer properties as I am aiming to accommodate dynamic content in both sections with more than 3 rows of extended space.

Below is the iText code snippet along with the 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();

Any suggestions on how to address this issue would be greatly appreciated. Thank you.

java html css pdf itext7

Answer 1

Answer №1

Check out this HTML example that has been successfully processed by pdfHTML. The multiline header is displayed exactly as expected at the top of the page:

<!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>

When rendered into a PDF, the page maintains the layout as shown below:

https://i.sstatic.net/lPlVm.png

Answer 2

Check out this HTML example that has been successfully processed by pdfHTML. The multiline header is displayed exactly as expected at the top of the page:

<!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>

When rendered into a PDF, the page maintains the layout as shown below:

https://i.sstatic.net/lPlVm.png

Create a PDF document with a custom header and footer by converting an HTML template using itext7

Answer №1

Similar questions

Can a Java command line application be executed from Python on an AWS EC2 instance?

What is the best way to include a div element with a dynamic animation on a webpage?

Can you confirm the mobile type, please? Using JavaScript to display a div only once based on the mobile type

Issue with Bootstrap 5: Mobile Menu Failure to Expand

Switching between numerical and alphabetical input using JQuery

Is it possible to activate the :active pseudoclass by pressing the 'enter' key on the keyboard using solely CSS?

Tips for rearranging button placements by utilizing multiple owl carousels across various webpages

What could be causing my body to resist adapting to the information on this website?

The BorderWidth property is set to 2px, however, it is not visible on the

Encountering issues following the execution of setObfuscatedProfileId/setObfuscatedAccountId

Difficulty encountered when trying to customize a polymer element that has been expanded (paper-slider)

Overcoming Challenges with Ajax Success in Bootstrap DataTable Modal

Angular 2: Dynamically positioning content within a div overlay

Ways to avoid losing data when a page is refreshed

Tips on how to avoid encoding certain special characters in a string when encoding. It's important to note that only the string itself needs to be encoded, not the entire URL

Utilize field variables for anonymous listener functionality

Having issues with implementing CSS3 animations on my webpage

Switching the image by clicking on the link

Annoying animation triggered upon loading of the page using AngularJS

I am experiencing an issue where my mobile responsive website consistently shows the smallest CSS width view. What could be the root of this