Html to PDF converter issues

Question

Good day, I have HTML content that i pass to my C# web api to convert to a pdf. My html contents' width is way longer than the dimensions of an A4 page. As a result my HTML content gets cut off. I need assistance with either:1) being able to move the cut off section to the next page 2) Or being able to scale the content to fit on the page. Can i have both solutions so that i can see what works best on my sideOther issues include:3) I also implement a custom header, the header needs to have an image and the image doesnt show4) i have a custom footer as well, i need to be able to add numbering oon the html being rendered there.I have supplied a picture on the PDF below below is the code used to print the pdf var htmlContent = jsonParse["htmlData"].ToString(); Syncfusion.HtmlConverter.HtmlToPdfConverter htmlConverter = new Syncfusion.HtmlConverter.HtmlToPdfConverter(); BlinkConverterSettings blinkConverterSettings = new BlinkConverterSettings(); //Set the page size. string clientLogoPath =Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "logo.png"); blinkConverterSettings.PdfPageSize = PdfPageSize.A4; blinkConverterSettings.HtmlHeader = $@"

Header

Header on {DateTime.Now.ToString("yyyy-MM-dd")}

"; blinkConverterSettings.HtmlFooter = $@"

Path stored

Page 1 of 1

Print Date: {DateTime.Now.ToString("yyyy/MM/dd hh:mm:ss")}

"; blinkConverterSettings.Margin.Top = 100; blinkConverterSettings.Orientation = PdfPageOrientation.Landscape; htmlConverter.ConverterSettings = blinkConverterSettings; string htmlText = htmlContent; string baseUrl = @"C:/Temp/HTMLFiles/"; Syncfusion.Pdf.PdfDocument document = htmlConverter.Convert(htmlText, baseUrl); using (MemoryStream stream = new MemoryStream()) { document.Save(stream); document.Close(true); byte[] pdfBytes = stream.ToArray(); return File(pdfBytes, "application/pdf", "generated.pdf"); }

Arumugam Muppidathi · Answer

Hi nqaba,Thank you for reaching out to Syncfusion support. 
Please find the details below1) being able to move the cut off section to the next page 
No, It's not possible to move the cut off section to the next page.  Our HTML to PDF converter internally uses advanced blink rendering engine to perform conversion. It can take screenshot of the URL and convert into output PDF document.2) Or being able to scale the content to fit on the page. Can i have both solutions so that i can see what works best on my side
Yes, Resizing the HTML content within a PDF can be achieved through the utilization of the Scale property of Blink in HTML Converter.  Please refer the documentation below https://help.syncfusion.com/document-processing/pdf/conversions/html-to-pdf/net/features#scale3) I also implement a custom header, the header needs to have an image and the image doesnt show We can able to add custom logo or image in header.  We have two options to add image in header. Use absolute pathGive absolute(full) path of the image in html content itself. Use relative pathIf you want to give relative path, then you should give correct base url where the image is present while converting HTML to PDF conversion as you specified in the provided code snippet. Please refer the documentation belowhttps://help.syncfusion.com/document-processing/pdf/conversions/html-to-pdf/net/features#html-string-to-pdf We kindly request you to ensure the correct base url which you have given in the provided code snippet.4) i have a custom footer as well, i need to be able to add numbering oon the html being rendered there. Yes, we can able to give custom footer to add page number while converting html to pdf conversion.  Please refer the documentation belowhttps://help.syncfusion.com/document-processing/pdf/conversions/html-to-pdf/net/features#header-and-footer  We have attached the sample and output document below for your reference. Sample: 
.NET296122516
Output: 
HTML-to-PDF-75758454
Please try the above sample and let us know the result.  If you are still facing any issue, we kindly request you to share the input HTML content, modified sample, package name and version and dotnet version 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.Regards,Arumugam M

nqaba nleya · Answer

Good day, Thank you for the response,On Point no# 2I need to be able to scale to fit which means it needs to be automatic scaling because the HTML that i will be passing is dynamic in width and height. Scale to Fit.Point #3Using relative or absolute path still doesnt work ive updated my code with the following line    <img src='https://www.simplilearn.com/ice9/free_resources_article_thumb/what_is_image_Processing.jpg' width='200' height='70'>this still does not render my image on the header, now it doesnt show the broken image/link, just empty.Point #4As indicated on the code provided, i am using the htmlFooter property so that i can style my footer the way i want, but i still need to have the page number function.using Syncfusion.HtmlConverter;using Syncfusion.Pdf;im using .Net 6Kind Regards,

Arumugam Muppidathi · Answer

Hi nqaba,Please find the details below I need to be able to scale to fit which means it needs to be automatic scaling because the HTML that i will be passing is dynamic in width and height. Scale to Fit. Currently, we don't have support to automatic scale adjustment. We have logged the " Add support for automatic scale adjustment in HTML to PDF conversion" to be a usability feature on our end. We will implement this support in any of our upcoming main releases. You can track the status of this feature through the following feedback link, Please use the below feedback link to track the status of the feature.https://www.syncfusion.com/feedback/52147/add-support-for-automatic-scale-adjustment-in-html-to-pdf-conversion Using relative or absolute path still doesnt work ive updated my code with the following line

this still does not render my image on the header, now it doesnt show the broken image/link, just empty. We have checked your issue on our end. Upon further analysis, Online image URL is not supported to add image in Header HTML while performing HTML to PDF conversion. Instead, you can convert online image to base64 image URL and add the base64 URL in Header HTML while performing HTML to PDF conversion. The conversion is working fine and the image is preserved in the output PDF document. However, we have attached the sample and output document below for your reference Sample: HTML-to-PDF-NET61322878288 Output: HTML-to-PDF1247657346 As indicated on the code provided, i am using the htmlFooter property so that i can style my footer the way i want, but i still need to have the page number function.We can able to add custom font and page number in footer while converting html to pdf conversion. Please refer the code snippet and documentation belowCode snippet:blinkConverterSettings.HtmlFooter = @"Page of ";Documentation: https://help.syncfusion.com/document-processing/pdf/conversions/html-to-pdf/net/features#header-and-footer Please try the above sample and let us know the result. Regards,Arumugam M

nqaba nleya · Answer

Good day,Thank you for the response. The information provided has assisted me to accomplish when i needed to achieve.Thank you.If possible, in addition to the automatic scaling feature please add the ability to cut the html like this Original the html will be like the picture below but because it does not fit the A4 page it gets cut into the next pageOtherwise thank you.Kind Regards,

Arumugam Muppidathi · Answer

Hi nqaba,Currently, we are analyzing on this and we will update further details on October 3rd, 2024Regards,Arumugam M

Arumugam Muppidathi · Answer

Hi nqaba,On our further analysis, cutting excess HTML content and moving it to the next page is not possible in our Blink converter, as it relies on Chromium. The converter essentially captures a screenshot of the URL and generates the PDF document. It will preserve the format of the input HTML exactly as it is displayed in Chromium-based browsers (such as Chrome’s print preview). As mentioned earlier, you can use the Scale property in BlinkConverterSettings to adjust the input HTML content to fit the output PDF during the conversion process.Regards,Arumugam M

1) being able to move the cut off section to the next page	No, It's not possible to move the cut off section to the next page. Our HTML to PDF converter internally uses advanced blink rendering engine to perform conversion. It can take screenshot of the URL and convert into output PDF document.
2) Or being able to scale the content to fit on the page. Can i have both solutions so that i can see what works best on my side	Yes, Resizing the HTML content within a PDF can be achieved through the utilization of the Scale property of Blink in HTML Converter. Please refer the documentation below https://help.syncfusion.com/document-processing/pdf/conversions/html-to-pdf/net/features#scale
3) I also implement a custom header, the header needs to have an image and the image doesnt show	We can able to add custom logo or image in header. We have two options to add image in header. Use absolute path Give absolute(full) path of the image in html content itself. Use relative path If you want to give relative path, then you should give correct base url where the image is present while converting HTML to PDF conversion as you specified in the provided code snippet. Please refer the documentation below https://help.syncfusion.com/document-processing/pdf/conversions/html-to-pdf/net/features#html-string-to-pdf We kindly request you to ensure the correct base url which you have given in the provided code snippet.
4) i have a custom footer as well, i need to be able to add numbering oon the html being rendered there.	Yes, we can able to give custom footer to add page number while converting html to pdf conversion. Please refer the documentation below https://help.syncfusion.com/document-processing/pdf/conversions/html-to-pdf/net/features#header-and-footer We have attached the sample and output document below for your reference. Sample: .NET296122516 Output: HTML-to-PDF-75758454 Please try the above sample and let us know the result.