1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. HtmlFooter creating extra white padding at bottom of page

HtmlFooter creating extra white padding at bottom of page

I'm trying to create a footer that displays a blue background all across the bottom page, with no margins (I want the blue to go right up to the bottom, left, and right on every page), and then dropping the page number in the bottom left hand corner.

The issue I'm running into is that when I use the `blinkConverterSettings.HtmlFooter`, it's rendering the HTML footer perfectly, but it's lining it up on the bottom of the page offset up by ~20 px from the bottom of the page. 

Image_8714_1726155107085

Here are the settings I'm running it with.

 var htmlConverter = new HtmlToPdfConverter(HtmlRenderingEngine.Blink);

 BlinkConverterSettings blinkConverterSettings = new BlinkConverterSettings();

 blinkConverterSettings.Scale = 1.0F;

 blinkConverterSettings.ViewPortSize = new Size(1024, 0);
 blinkConverterSettings.Margin = new PdfMargins { All = 0 };
 blinkConverterSettings.Margin.Bottom = 40;
 blinkConverterSettings.HtmlFooter = "<body style=\"margin:0;\"><div style=\"background-color: blue; -webkit-print-color-adjust: exact; width:100%; height: 40px; font-size: 15px; color:white;\"><div style=\"padding: 10px\"><span>Test</span><span class=\"pageNumber\"></span></div></div></body>";


 htmlConverter.ConverterSettings = blinkConverterSettings;
 PdfDocument document = htmlConverter.Convert("<p>test</p>, "");

Is there a better way to do this?



6 Replies
SG Sivaram Gunabalan Syncfusion Team September 13, 2024 01:03 PM UTC

Hi Chris,


We were able to reproduce the reported issue on our end. Currently we are validating this, and we will update the further details on September 17th, 2024.


Regards,

Sivaram G


CH Chris Hobbs September 13, 2024 01:29 PM UTC

Thanks much! I found out that I can "fix" it by using "'position:fixed; bottom:0" in the styles. That actually lead to a rabbit hole, so let me know if this request needs to go in another thread. Is there any way that it would be possible to define a header or footer section on the main html? 

The reason I ask is because it looks like custom fonts are not supported on the header and footer out of the box. I know that there is a specialized class on the footer called "pageNumber" that will show the current page number on the rendered PDF. 

Similarly, if we had some sort of class, like "pdf-footer", and "pdf-header" that was respected within the HTML. The PDF itself, people would be able to use custom fonts, would be able to use bootstrap, and other technologies in their headers and Footers. Since it looks like using position fixed will actually render The fixed element on every single page, I think that's the route I'm going to have to go with anyways to make my custom fonts work in headers and Footers, and I figure if I have to go that route, it might be a feature that other people could use as well if we could get it standardized within the sync fusion library.


AM Arumugam Muppidathi Syncfusion Team September 17, 2024 02:56 AM UTC

Hi Chris,


Currently, we are checking this and will update further details shortly


Regards,
Arumugam M


AM Arumugam Muppidathi Syncfusion Team September 17, 2024 10:30 AM UTC

Hi Chris,


We have checked your issue on our end.  Upon further analysis,  when converting HTML to PDF, you can set an HTML file as header and footer. Use the HtmlHeader and HtmlFooter properties within the BlinkConverterSettings class to add header and  footer in output PDF document.  By using this, we can able to use custom font for header and footer through CSS styles in header and footer html document respectively.  You can find our UG documentation to use HTML file as header and footer.

 

UG: https://help.syncfusion.com/document-processing/pdf/conversions/html-to-pdf/net/features#html-header-and-footer

 

However, we have attached the sample and output document for html to pdf conversion using custom font header and footer.

 

Sample: HTML-Header-and-Footer1573040278
Output: HTML-to-PDF-1605314111

Please try the above solution and let us know the result.  Kindly get back to us if you need any further assistance.


Regards,
Arumugam M


CH Chris Hobbs September 17, 2024 01:30 PM UTC

Hi Arumugam,

It looks like you can use custom fonts, but only if those fonts are installed on the machine that is rendering the HTML. For example, if I wanted to use Helvetica, I would need to either be on a Mac, or have it downloaded to the Windows machine the HTML renders on.

Is there any way to use, say, Google Fonts, or a similarly referenced font face using the Html Header and 


AM Arumugam Muppidathi Syncfusion Team September 18, 2024 11:18 AM UTC

Hi Chris,


We regret to inform you that due to a limitation in the Blink rendering engine, Google Fonts and URL-based images cannot be rendered in the HtmlHeader and HtmlFooter properties of the HTML converter. However, you can still achieve the desired result by using the PdfHeader and PdfFooter properties instead. In this method, the output pdf will preserve the header and footer, like how the input HTML file is displayed in chromium-based web browsers (chrome print preview). The same behavior is replicated in our converter.


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/HTMLtoPDF_PdfHeader-1897779511

 

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


Regards,
Arumugam M


Loader.
Up arrow icon