HtmlToPdfConverter HTMLFile from URL as PDF Header and PDF Footer

[Satheesh Kumar]

Can you please help me to Add HTML Content from URL as PDF Header and Footer? I'm creating a PDF document from URL using HtmlToPdfConverter in the same document I would like to append add header and footer content from a URL .

Please guide me through the steps to achieve the desired output.

[Sasi Kumar Sekar]

Hi Satheesh, 

 

Thank you contacting Syncfusion support, 

We can convert each HTML to PDF(Header, body(actual HTML), footer) separately and then draw it in the new PDF document as it looks like header and footer added.  

  

1)      Convert the header and footer HTML to PDF with page height 100pt.  

2)      Create the actual HTML(body) to PDF.  

3)      Get the header and footer as template and draw it in the new document on the top and bottom of the page respectively.  

4)      Then get the actual (body) PDF and draw in between the header and footer(in the new document).  

5)      But this needs 3 level of HTML to PDF conversion. 

 

 

Please find the sample to convert the HTML as header and footer of the PDF page. 

Sample link: 

http://www.syncfusion.com/downloads/support/forum/131142/ze/HeaderFooter_HTMLtoPDF-1157729767 

Please let us know if you need further assistance on this. 

Regards, 

Sasi Kumar S. 

[James Lau]

It is possible change the height/width of header, footer. according to the html content?

[Prakash Viswanathan]

Hi James, 

Thanks for using Syncfusion products.  

Our WebKit HTML converter do not have direct support for calculating the header width/height based on the input HTML. As a workaround, we can use SinglePageLayout to adjust the height of header/footer. We have attached workaround sample to calculate the header/footer height based on the input HTML. Please find the sample from below link, 

Sample: http://www.syncfusion.com/downloads/support/forum/131142/ze/HTMLHeaderFooter-688665200  

Regards, 

Prakash V 

[Sarim]

The document created in the sample code is through API, what about if our document is generated with the HTML to pdf convertor. 

[Gowthamraj Kumar]

Hi Sarim, 

We have already generated a PDF document from using our HTML to PDF Converter. Can you please provide more information about your requirement to check the scenario in our end. So, that it will be helpful for us to analyze and assist you further on this. 

Regards, 

Gowthamraj K. 

[hamariwishes]

It is possible to change it features such as header.

https://icccricketworldcup2019.net/smartcric-live-ipl/

[Gowthamraj Kumar]

Hi hamariwishes

At present, Syncfusion HTML converter do not have direct support for adding header or footer from HTML file. As a workaround, we can convert each HTML data to PDF (Header, body (actual HTML), footer) separately and then draw it in the new PDF document as it looks like header added.

Please refer the below link for more information,

KB (Html) : https://www.syncfusion.com/kb/8196/how-to-add-html-as-header-and-footer-in-pdf-while-converting-html-to-pdf

KB: https://www.syncfusion.com/kb/8381/how-to-add-pdf-header-and-pdf-footer-while-converting-html-to-pdf

We requested you to share your exact requirement details, so that we can check and share the solution.

• Whether you want to change the header which is in the html page? or what type of changes you want to do?
• Change the content of header from Html page?
• Expected output screenshot
• More details on your header requirement

Regards,

Gowthamraj K

[pesu toksen]

is it good to convert the footer like this .

[Gowthamraj Kumar]

Hi pesu toksen,

Yes. At present, Syncfusion HTML converter do not have direct support for adding header or footer from HTML file. As a workaround, we can convert each HTML data to PDF (Header, body (actual HTML), footer) separately and then draw it in the new PDF document as it looks like the header and footer added. This is our suggested approach to add header and footer while converting HTML to PDF.

Please refer the below link for more information,

KB (Html) : https://www.syncfusion.com/kb/8196/how-to-add-html-as-header-and-footer-in-pdf-while-converting-html-to-pdf

KB: https://www.syncfusion.com/kb/8381/how-to-add-pdf-header-and-pdf-footer-while-converting-html-to-pdf

If you are facing any issue, we request you to share the details with input HTML document, output document to check on our end. So that it will helpful for us.

Regards,

Gowthamraj K

[Sumrender Singh]

Hello,

Is there any support for adding a dynamic header?
Or can you guide me to any workaround for this?

My use case is that I have a header which is generated dynamically and might get lengthy, so I cannot hardcode any padding or margin to create space for header and footer.

I am thinking of somehow getting header height and then add this property in the html body.

@media print {

@page {

margin-top: {HEIGHT_OF_HEADER};

}

}

[Arumugam Muppidathi]

Hi Sumrender,

We have reviewed your query, and after further analysis, we found that you can determine the height of the HTML header using the GetHtmlBounds() method. This method allows you to retrieve the dimensions (width and height) of the HTML content based on the current settings, such as the viewport width and scale.

 

By using the dynamically calculated height from GetHtmlBounds(), you can set this value as the top margin in the BlinkConverter settings. This approach should address your requirement of handling a dynamic header without the need for hardcoded padding or margins.

 

For further reference, please find the documentation for the GetHtmlBounds() property here:

Converting HTML to PDF | GetHtmlBounds | Syncfusion

 

Additionally, we’ve included a sample along with its corresponding output document for your review.

 

Please try the provided sample on your end and let us know the results. If you encounter any issues, we kindly ask that you provide more details about your specific requirements, along with sample input and HTML documents, as well as the expected output PDF. This will help us better understand your use case and offer a more tailored solution.

Regards,

Arumugam M

Attachment: GetBoundsinHTMLfile_60defb2.zip

[Sumrender Singh]

Hi Arumugam M,

I tried using GetHtmlBounds but it is not giving the correct height. Here is the POC that I tried.

https://github.com/sumrender/syncfusion-html-to-pdf-poc

Can you please take a look at this or give any other workaround. Anything works as long as I am able to display dynamic headers which sometimes get as long as half of the page.

I tried this also but getting this error: `Protocol Error (Page.printToPdf): Printing Failed)`

https://www.syncfusion.com/forums/188841/rendering-html-footer-content-with-htmltopdfconverter?reply=zm3iyv

[Arumugam Muppidathi]

Hi Sumrender,

Thank you for providing the additional details.

We have reviewed the issue you reported, and after further analysis, we were able to reproduce the problem during the HTML to PDF conversion with a dynamic HTML header using the GetHtmlBounds method. However, we found a solution to dynamically calculate the HTML header size. We have created a workaround sample that should meet your requirements. The sample and its corresponding output document are attached for your reference.

 

Please try the sample on your end and let us know the results. We look forward to hearing from you and confirming if this solution meets your needs. If you need further assistance, feel free to reach out.

Regards,
Arumugam M

Attachment: syncfusionhtmltopdfpocmain_2_af566e05.zip

[Sumrender Singh]

Hi Arumugam M,

I have created this repository detailing my problem, I am unable to repeat a large enough header. Can you please take a look as this is a urgent business requirement.

https://github.com/sumrender/syncfusion-html-to-pdf-poc
Above link also has sample pdfs.

I want to repeat the entire header.

<div>
{{{this.HeaderRowOne}}}
{{{this.HeaderRowTwo}}}
</div>

Currently, if my header exceeds a certain height, it stops repeating.
I am only able to repeat this
<div>
{{{this.HeaderRowOne}}}
</div>

I want to be able to print 'want.pdf' with full repeating headers but I'm currently stuck with 'current.pdf'

https://www.loom.com/share/5617df23d92e4ced88642012206c4ee8?sid=c949514e-20fb-48e8-b01c-ce3158c31ac9

[Arumugam Muppidathi]

Hi Sumrender,

Upon further analysis, we were able to reproduce the reported issue on our end.  Currently, we are validating this and we will update further details on March 17th, 2025.

Regards,
Arumugam M

[Arumugam Muppidathi]

Hi Sumrender,

Our HtmlConverter internally uses the Blink rendering engine. It makes use of the Chromium executable in headless mode to convert HTML to PDF. It preserves the PDF document as the input HTML appears in Chromium-based web browsers (Chrome print preview).

 

So, kindly check your input HTML file, HTML string, or URL in Chrome print preview. We are able to replicate the same issue in the chrome print preview itself.

 

However, we have modified the input HTML string and assigned the margin value as 0 in blink settings, and it is now working fine. Please find the sample below and let us know the result.

Regards,

Arumugam M

Attachment: syncfusionhtmltopdfpoc_7e8e5c28.zip