Page sizes doesn't work as expected

[Duminda Jayasuriya]

I have created a html template where it looks ok when converting to A4 in landscape but it does not give the expected results when it comes to letter or ledger as the A4. I have attached the results and also the code is as below.

 try

 {

     PageMargin margin = manifest.Input.PageSetup.PageMargin;

     HeaderFooterText headerText = manifest.Input.PageSetup.HeaderText;

     HeaderFooterText footerText = manifest.Input.PageSetup.FooterText;

     //PdfPageOrientation pdfPageOrientation = !string.IsNullOrEmpty(manifest?.Input?.PageSetup?.Orientation) ? Enum.Parse<PdfPageOrientation>(manifest?.Input?.PageSetup?.Orientation) : PdfPageOrientation.Portrait;

     PdfPageOrientation pdfPageOrientation = !string.IsNullOrEmpty(manifest?.Input?.PageSetup?.Orientation) && manifest.Input.PageSetup.Orientation.ToLower() == "landscape" ? PdfPageOrientation.Landscape : PdfPageOrientation.Portrait;

     SizeF pdfpageSize = GetSyncfusionPdfPageSize(manifest.Input?.PageSetup?.Size.ToUpper(), pdfPageOrientation);

     htmlDocument = ReplacePageBreakTags(htmlDocument);

     ///Margins applies to whole page including header and footer

     if (!manifest.RequestId.Contains("withMargin"))

     {

         HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter(HtmlRenderingEngine.Blink);

         //Initialize HTML to PDF converter

         BlinkConverterSettings blinkConverterSettings = new BlinkConverterSettings();

         blinkConverterSettings.CommandLineArguments.Add("--no-sandbox");

         blinkConverterSettings.CommandLineArguments.Add("--disable-setuid-sandbox");

         //convert header HTML and set its template to webkit settings

         //add the header in outside bounds of margin

         if (!string.IsNullOrEmpty(header))

         {

             blinkConverterSettings.PdfHeader = HeaderHTMLtoPDFSyncfusion(header, margin.HeaderMargin, pdfPageOrientation, pdfpageSize, manifest);

         }

         else

         {

             blinkConverterSettings.PdfHeader = HeaderTexttoPDFSyncfusion(headerText, margin.HeaderMargin, pdfPageOrientation, pdfpageSize, manifest);

         }

         if (!string.IsNullOrEmpty(footer))

         {

             blinkConverterSettings.PdfFooter = FooterHTMLtoPDFSyncfusion(footer, margin.FooterMargin, manifest.Input.IncludePageNumber, pdfPageOrientation, pdfpageSize, manifest);

         }

         else

         {

             blinkConverterSettings.PdfFooter = FooterTexttoPDFSyncfusion(footerText, margin.FooterMargin, manifest.Input.IncludePageNumber, pdfPageOrientation, pdfpageSize, manifest);

         }

         //blinkConverterSettings.ViewPortSize = new Syncfusion.Drawing.Size(1024, 0);

         blinkConverterSettings.ViewPortSize = new Syncfusion.Drawing.Size(manifest.Input.PageSetup.ViewPortSize.ContentPages.Height, manifest.Input.PageSetup.ViewPortSize.ContentPages.Width);

         blinkConverterSettings.Orientation = pdfPageOrientation;

         blinkConverterSettings.PdfPageSize = pdfpageSize;

         blinkConverterSettings.EnableJavaScript = manifest.EnableJavaScript;

         blinkConverterSettings.Margin.All = 0;

         htmlConverter.ConverterSettings = blinkConverterSettings;

         //Convert html string to PDF

         PdfDocument document = htmlConverter.Convert(htmlDocument, "");

         MemoryStream stream = new MemoryStream();

         document.Save(stream);

         document.Close(true);

         PdfLoadedDocument loadedDocument = new PdfLoadedDocument(stream);

         //Save and close the PDF document

         if (!string.IsNullOrEmpty(coverPage))

         {

             PdfDocument documentWithCoverPage = AddCoverPage(coverPage, loadedDocument, pdfPageOrientation, pdfpageSize, manifest);

             if (!string.IsNullOrEmpty(LastPage))

             {

                 PdfDocument documentEndCoverPage = AddEndCoverPage(LastPage, documentWithCoverPage, pdfPageOrientation, pdfpageSize, manifest);

                 MemoryStream finaldocumentstream = new MemoryStream();

                 documentEndCoverPage.Save(finaldocumentstream);

                 documentEndCoverPage.Close(true);

                 return finaldocumentstream.ToArray();

             }

         }

         return stream.ToArray();

     }

     else

     {

         HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter(HtmlRenderingEngine.Blink);

         //Initialize HTML to PDF converter

         BlinkConverterSettings blinkConverterSettings = new BlinkConverterSettings();

         blinkConverterSettings.CommandLineArguments.Add("--no-sandbox");

         blinkConverterSettings.CommandLineArguments.Add("--disable-setuid-sandbox");

         // blinkConverterSettings.ViewPortSize = new Syncfusion.Drawing.Size(1024, 0);

         blinkConverterSettings.ViewPortSize = new Syncfusion.Drawing.Size(manifest.Input.PageSetup.ViewPortSize.ContentPages.Height, manifest.Input.PageSetup.ViewPortSize.ContentPages.Width);

         blinkConverterSettings.Margin = new Syncfusion.Pdf.Graphics.PdfMargins { Top = margin.HeaderMargin.Height, Left = 0, Right = 0, Bottom = margin.FooterMargin.Height };

         blinkConverterSettings.Orientation = pdfPageOrientation;

         blinkConverterSettings.PdfPageSize = pdfpageSize;

         blinkConverterSettings.EnableJavaScript = manifest.EnableJavaScript;

         htmlConverter.ConverterSettings = blinkConverterSettings;

         //Convert html string to PDF

         using (Syncfusion.Pdf.PdfDocument document = htmlConverter.Convert(htmlDocument, ""))

         {

             using (var stream = new MemoryStream())

             {

                 //Save and close the PDF document

                 document.Save(stream);

                 document.Close(true);

                 //load the file stream

                 using (PdfLoadedDocument ldoc = new PdfLoadedDocument(stream))

                 {

                     //create the document

                     using (Syncfusion.Pdf.PdfDocument finalDoc = new Syncfusion.Pdf.PdfDocument())

                     {

                         finalDoc.PageSettings.Margins.All = 0;

                         finalDoc.PageSettings.Size = pdfpageSize;

                         finalDoc.PageSettings.Orientation = pdfPageOrientation;

                         //get the templates from loadeddocument

                         for (int i = 0; i < ldoc.Pages.Count; i++)

                         {

                             Syncfusion.Pdf.Graphics.PdfTemplate template = ldoc.Pages[i].CreateTemplate();

                             finalDoc.Pages.Add();

                             finalDoc.Pages[i].Graphics.DrawPdfTemplate(template, new PointF(0, 0));

                         }

                         //add the header in outside bounds of margin

                         if (!string.IsNullOrEmpty(header))

                         {

                             finalDoc.Template.Top = HeaderHTMLtoPDFSyncfusion(header, margin.HeaderMargin, pdfPageOrientation, pdfpageSize, manifest);

                         }

                         else

                         {

                             finalDoc.Template.Top = HeaderTexttoPDFSyncfusion(headerText, margin.HeaderMargin, pdfPageOrientation, pdfpageSize, manifest);

                         }

                         if (!string.IsNullOrEmpty(footer))

                         {

                             finalDoc.Template.Bottom = FooterHTMLtoPDFSyncfusion(footer, margin.FooterMargin, manifest.Input.IncludePageNumber, pdfPageOrientation, pdfpageSize, manifest);

                         }

                         else

                         {

                             finalDoc.Template.Bottom = FooterTexttoPDFSyncfusion(footerText, margin.FooterMargin, manifest.Input.IncludePageNumber, pdfPageOrientation, pdfpageSize, manifest);

                         }

                         using (var streamNew = new MemoryStream())

                         {

                             finalDoc.Save(streamNew);

                             return streamNew.ToArray();

                         }

                     }

                 }

             }

         }

     }

 }

 catch (Exception ex)

 {

     throw new Exception(ex.Message);

 }

Attachment: Pdf_Results_f124fd1a.zip

[Arumugam Muppidathi]

Hi Duminda,

We have checked your issue on our end. Unfortunately, we are unable to reproduce the reported issue without input html document. Our HTML Converter 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.  We kindly request you to share the  input html document, package version, package name, environment details 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

[Duminda Jayasuriya]

Hi Arumugam M.

Package information .

Syncfusion.HtmlToPdfConverter.Net.Windows - 25.2.3

Syncfusion.HtmlToPdfConverter.Net.Linux - 25.2.3

Environment details :

Device Specification

Device name ADDO-PF4V7529

Processor 13th Gen Intel(R) Core(TM) i5-1350P 1.90 GHz

Installed RAM 32.0 GB (31.7 GB usable)

Device ID 231FA833-39F0-4F9A-999F-A1F0ADE22E1B

Product ID 00330-80000-00000-AA850

System type 64-bit operating system, x64-based processor

Pen and touch No pen or touch input is available for this display

Windows Specification

Edition Windows 11 Business

Version 22H2

Installed on ‎3/‎14/‎2024

OS build 22621.3737

Experience Windows Feature Experience Pack 1000.22700.1009.0

Attachment: Addo_Templates_c758176f.zip

[Arumugam Muppidathi]

Hi Duminda,

We are able to find the difference in the provided document, but we are unable to reproduce the issue with your input HTML files because some HTML resources are missing. However, we have attached the tested sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Html_to_Pdf_PageSize-621419355

Kindly try the sample on your end and share the modified reproducible sample with a complete code snippet and all HTML resources needed to replicate the same issue on our end. This will enable us to provide a prompt solution for the reported issue.

Regards,
Arumugam

[Duminda Jayasuriya]

Hi Arumugam M,

I have executed your sample project on my end with resources and now the issue can be seen in A4 format where it overflows to the following page and in ledger I want the two pages to be in separate pages . I have attached Results from the sample project and the relevant resources.

Regards,

Duminda 

Attachment: Resources_and_Results_767473e1.zip

[Nitheeshkumar Thangaraj]

Hi Duminda,

Thank you for sharing the HTML resources with us.

Our HTML converter internally using the blink rendering engine. It internally makes use of chromium executable in headless mode for converting HTML to PDF. It will preserve the PDF document like how the input HTML is displayed in chromium-based web browsers (chrome print preview).

Upon further analysis, when changing the orientation and PDF page size in the Blink settings, the Chromium viewport size also changed. Therefore, the output PDF document will be replicated exactly as the input document in Chrome's print preview, with the same orientation and page size. For example, please refer to the below A4 with landscape screenshot in the Chrome print preview.

Please find the below solutions.

A4-Landscape

We can resolve the overflow issue by setting scale value to 1.0f or viewport size value to (700,0). Please refer the below code snippet. static PdfDocument AddCoverPage(string htmlText, PdfLoadedDocument lDoc, PdfPageOrientation orientation, SizeF size) {    //Initialize the HTML to PDF converter.    HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter();      BlinkConverterSettings blinkConverterSettings = new BlinkConverterSettings();    //Set Blink viewport size    blinkConverterSettings.PdfPageSize = size;    blinkConverterSettings.Orientation = orientation;    blinkConverterSettings.ViewPortSize = new Size(700, 0);    //or    // blinkConverterSettings.Scale=1.0f;    blinkConverterSettings.Margin.All = 0;    //Assign Blink converter settings to HTML converter    htmlConverter.ConverterSettings = blinkConverterSettings;      //Convert URL to PDF    PdfDocument document = htmlConverter.Convert(htmlText, string.Empty);    document.ImportPageRange(lDoc, 0, lDoc.PageCount - 1);    return document; }

Ledger: Landscape

Upon further analysis, we have tried to move the page content onto two pages, but the ledger page size hight is too high. Therefore, we are unable to split the content onto a second page. The reported issue occurs within the Blink rendering engine itself. However, we can split the HTML content into two pages by using the 'page-break-before: always;' style on the HTML element. Please refer to the screenshot below and the modified HTML document.   Modified HTML document: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AddoCoverPages-2000938813

Kindly try the above provided solution on your end and let us know the result.

Regards,
Arumugam M

[Duminda Jayasuriya]

Hi Nitheeshkumar Thangaraj,

Worked out your code segments in my project locally the issue with overflowing is not fixed with the given code snippet. 

When it comes to the second solution of using the Html code segment to separate the content of document It works fine, but now we have a new issue where a white border can be seen on the second page that was separated by the given html code . Generated results are attached herewith.

Regards,

Duminda Jayasuriya

Attachment: PDF_Results_After_Changes_1ec7a893.zip

[Arumugam Muppidathi]

Hi Duminda,

Currently we are checking the reported issue on our end.  We'll provide further details shortly.

[Arumugam Muppidathi]

Hi Duminda,

We are unable to reproduce the A4 document overflow issue, and it's working fine on our end. We have checked the white space issue on the second page of the output PDF document. As we said earlier, we are internally using the Blink rendering engine to convert the PDF document. It internally utilizes the Chromium headless browser. Therefore, our converter replicates the same as how the input HTML is shown in the Chrome print preview.

 

In the modified input HTML document, a margin of 70 is added to the div element. When checking the input HTML file in Chrome print preview, the margin white space is added in Chrome print preview itself, so that our converter also replicates the same behavior. The reported issue can be resolved by removing the margin value in the HTML file. We have attached a sample output document and screenshot for your reference.

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Html_to_Pdf_PageSize_Modified-1443692064

 

Output: https://www.syncfusion.com/downloads/support/directtrac/general/ze/OutputDocuments932025799

 

Kindly try the sample and let us know the result. If you are still facing issues, we kindly request you to check your input HTML file in the Chrome print preview with the same page size, margin, scale, and orientation. Please also share the modified reproducible sample with input HTML documents with us to replicate the reported issue on our end. This will allow us to analyze and provide you with a prompt solution.

 

Note: While converting the Ledger PDF document with page break style, extra space is added at the bottom of the PDF page because the Ledger PDF document height is 1224 with landscape orientation. Therefore, the input HTML string is not filling the complete page of the document. This occurs in the Chromium itself.

Regards,
Arumugam M

[Duminda Jayasuriya]

HI Arumugam M,

Issue was fixed when margin-top was removed and A4 is generated as we expect but there's a white border at the bottom of the page when the template is converted to letter size. Results and the new template is attached below.

Regards

Duminda 

Attachment: Final_Results_and_New_template_3285f8a0.zip

[Arumugam Muppidathi]

Hi Duminda,

We have checked the provided template with letter size in Chrome print preview and reproduced the white border issue in the Chrome print preview itself. As a workaround, we can adjust the content in the PDF page by setting the Scale property value of BlinkConverterSettings to 1.615f for your input template. We have attached our UG documentation for the Scale property, along with a sample and the output document for your reference:

UG: https://help.syncfusion.com/document-processing/pdf/conversions/html-to-pdf/net/features#scale
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Html_to_Pdf_PageSize_Modified-1617540362

Output: https://www.syncfusion.com/downloads/support/directtrac/general/pd/CoverPageLetter1691476598

 

Kindly try the above solution and let us know the result.

Regards,
Arumugam M