Rendering HTML footer content with HtmlToPdfConverter

[Tim Coulter]

Hello Syncfusion,

I am using HtmlToPdfConverter (with the Webkit rendering engine) to convert styled HTML to PDF, which works well.

The implementation also uses PdfCompositeField, together with PdfPageNumberField and PdfPageCountField to render page numbering and other repeating details in the page footer. However, I need to the footer content to adopt the same styling as the page content, which is determined by a user-defined CSS configuration that is passed when the page content is rendered. Therefore, I am trying to find a way to implement the footer rendering using HTML.

If necessary, I am happy to reserve empty footer space during the main document rendering and then iterate over the rendered pages and separately render each footer. It would be something similar to your proposed solution to the following issue, except using HTML content: https://www.syncfusion.com/forums/187316/right-align-pdfcompositefield

Unfortunately, I haven't discovered the required pattern to make this work. Could you please advise?

Many thanks,

Tim

[Karmegam Seerangan]

Hi Tim,

Thank you for contacting Syncfusion Support. Currently, we are analyzing the requested behavior on our end and will provide further details on June 21st, 2024.

Regards,

Karmegam

[Karmegam Seerangan]

Thank you for your patience.

 

We can add the header and footer while converting the HTML to PDF using the PdfPageTemplateElement in PdfHeader and PdfFooter properties in the WebkitConverterSettings class. Please find the requested behavior sample attached below.

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Header_Footer_HtmlToPDF496381594

 

Kindly try the sample on your end and get back to us if you need further assistance.

 

[Tim Coulter]

Hello Karmegam Seerangan,

Thank you for researching this issue and forwarding your recommendations.

Unfortunately I don't think this solves my problem. If I understand correctly, PdfPageTemplateElement must be styled using instances of PdfFont and PdfBrush. In other words, it cannot be populated using an HTML content string that inherits the same CSS styling as the body content of the PDF page.

Our rendered PDF pages support multiple different CSS style sheets (themes) and our goal is to render header and footer content that is visually compatible with those themes, hence the need for the footer to be based on HTML content. If this functionality is not supported, please let me know and we will try to devise a workaround.

Many thanks for your support,

Tim

 

[Arumugam Muppidathi]

Hi Tim,

In the previously provided sample, we are converting the input HTML string to a PDF document and then creating the template from the converted document. After assigning the template to the PdfHeader property, it will preserve the header and footer as displayed in the input HTML string in the Chrome browser. We are unable to add automatic page numbers in the footer using the HTML string in the PdfHeader property. Therefore, we are using the PdfFont and PdfBrush classes to draw the page numbers on each page in that sample. We also have a workaround solution to add automatic page numbers using the HTML string with CSS style using the HtmlFooter property in BlinkConverterSettings. Please refer to the documentation below.

How to Insert a Page Number in the HTML Footer Using the Inline Style (syncfusion.com)

 

Kindly try the above-provided solution and get back to us if you need further assistance. If you are still facing the issue, we kindly request you to share your expected output documents, screenshots, and input HTML/URL with us to replicate the same issue on our end. This information will be more helpful for us to analyze and provide you with a prompt solution.

 

Note: Our HTML converter internally uses the Blink rendering engine. It utilizes a Chrome headless browser for converting HTML to PDF. It will preserve the PDF document in the same way as the input HTML/URL is displayed in Chromium-based web browsers such as Chrome and print preview.

Regards,
Arumugam M