1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Blink coverter errors when trying to use page breaks or media print

Blink coverter errors when trying to use page breaks or media print

Hi SF,

I'm getting this exception when trying to use page breaks and/or print media in URL to PDF conversion using the Blink converter:



Message: Failed to convert webpage

StackTrace:    at Syncfusion.HtmlConverter.BlinkConverter.ConvertToPdf(String url, PdfDocument& document)
   at Syncfusion.HtmlConverter.BlinkConverter.<>c__DisplayClass161_0.<Convert>b__0()
   at System.Threading.ThreadHelper.ThreadStart_Context(Object state)
   at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean preserveSyncCtx)
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean preserveSyncCtx)
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
   at System.Threading.ThreadHelper.ThreadStart()


This is my converter's setup:


   BlinkConverterSettings settings = new BlinkConverterSettings
            {
                //WebKitPath = @"/bin/QtBinaries/",
                EnableJavaScript = true,
                Orientation = orientation,
                Margin = new PdfMargins { Top = 20, Bottom = 20, Left = 20, Right = 20 },
                PdfPageSize = PdfPageSize.A4,
                MediaType = MediaType.Print,
            };

    HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter(HtmlRenderingEngine.Blink)
            {
                ConverterSettings = settings,
            };

this.pdfDoc = htmlConverter.Convert(content);


I also have a bunch of HTML that converts just fine when I don't use media print or page breaks like this:


<p style="page-break-after: always;"></p>




Thanks in advance,

27 Replies
JJ Juan Jiminez February 28, 2020 02:20 AM UTC

Here's a sample.

Attachment: PDF_exception_e0b0114d.zip

SL Sowmiya Loganathan Syncfusion Team February 28, 2020 12:37 PM UTC

Hi Juan,  
 
Thank you for contacting Syncfusion support.   
 
We are able to reproduce the reported exception with provided sample. Currently we are validating on this and we will update you the further details by March 3, 2020.   
 
Regards,  
Sowmiya Loganathan 


JJ Juan Jiminez March 2, 2020 11:25 PM UTC

Hi Sowmiya,

I found out I was using an older version of the blink binaries so after updating to 17.4.0.46, the media print and page breaks don't trigger that exception anymore. However, as stated on https://www.syncfusion.com/forums/151982/repeat-table-headers-with-the-blink-converter, if I include the PDF's header/ footer generation, it does throw that exception.

As a more comprehensive scenario, I need to be able to generate a PDF with the following features:

  • Generate content from a web page (URL to PDF) including all styles and custom external assets (fonts, images, etc).
  • Include PDF's Header and Footer
  • Ability to define page breaks (within the HTML)
  • Repeat table headers


    See atached sample.

I appreaciate your help.

Attachment: Blink_PDF_exception_ff5d129f.zip

SL Sowmiya Loganathan Syncfusion Team March 3, 2020 01:34 PM UTC

Hi Jugan,  
 
Sorry for the inconvenience caused. Still we are validating on this and will update the further details on 4th February, 2020.  
 
Regards, 
Sowmiya Loganathan  


GK Gowthamraj Kumar Syncfusion Team March 4, 2020 02:42 PM UTC

Hi Juan, 

Thank you for your patience. 

We have checked the provided sample, the exception occurs due to the size of header and footer template. We can successfully add header and footer when creating a templates with proper heights. Also we have achieved your requirements by changing orientation and single page layout from our converter settings. Please refer below code snippet for create template with proper height instead of page height.  

RectangleF bounds = new RectangleF(0, 0, document.Pages[0].GetClientSize().Width, 50); 
PdfPageTemplateElement template = new PdfPageTemplateElement(bounds); 

We have attached the modified sample for your reference, 


Please try the above sample and let me know us know if you need any further assistance on this.  

Regards, 
Gowthamraj K 


JJ Juan Jiminez March 4, 2020 04:40 PM UTC

Hi Gowthamraj,

Unfortunately I can't use a fixed header / footer height because my content for those sections is dynamic so that's why I'm using the SinglePageLayout  workaround provided on https://www.syncfusion.com/forums/131142/htmltopdfconverter-htmlfile-from-url-as-pdf-header-and-pdf-footer, which works well for dynamic header / footer until  I include page breaks on the content area (not header / footer).

JJ Juan Jiminez March 4, 2020 05:56 PM UTC

By the way, keep in mind I must use the print media type because I need table headers to be repeated on each page (with the blink converter).

I also tried the Webkit converter and most of the features work well but it doesn't render styles like font color, bootstrap classes, etc. so that's why I switched to the Blink Converter as suggested on https://www.syncfusion.com/forums/148653/bootstrap-support-in-html-to-pdf-conversion.

GK Gowthamraj Kumar Syncfusion Team March 5, 2020 02:32 PM UTC

Hi Juan, 

Thank you for your update. 

Currently we are analysing on this header/footer with dynamic height in Single page layout and we will update you with further details by 9th March 2020. 

Regards, 
Gowthamraj K 


GK Gowthamraj Kumar Syncfusion Team March 9, 2020 04:03 PM UTC

Hi Juan , 
  
Thank you for your patience. 
  
On further analysis the provided sample, we have getting an multiple header and footer pages with SinglePageLayout in our Blink converter. Blink rendering engine internally make use of chromium executable in headless mode for converting HTML to PDF. We get an multiple header pages in chrome itself, this is limitation of chrome rendering engine. So currently we do not support the dynamic header/footer height with SinglePageLayout in Blink rendering engine. 
  
However, you can successfully add the header and footer when creating a templates with proper heights. Kindly try to convert the content html with mediatype as print, not for header and footer html. 
  
Please let us know if you need any further assistance on this.   
  
Regards, 
Gowthamraj K 


JJ Juan Jiminez March 9, 2020 10:57 PM UTC

Hi Gowthamraj,

I think I might be able to get around with a fixed header by adding some extra logic to calculate my content height, however, after setting media type to print (on the content only), multiple issues arise (see attached sample):

1. Content is not full width on the PDF (it is when rendering the HTML on the browser and when I don't use media print).
2. Footer gets cut off (it has the same fixed height as the header with the same content).
3. If I include margins at the main document level, the header gets some extra padding to the left.

I appreciate you working on this.


Attachment: Print_media_issues_5f9adf1e.zip

GK Gowthamraj Kumar Syncfusion Team March 10, 2020 05:06 PM UTC

Hi Juan,  

Thank you for your update.  

Currently we are checking this reported multiple issues in that provided sample and we will update you with further details by 12th March 2020.  

Regards,  
Gowthamraj K 


GK Gowthamraj Kumar Syncfusion Team March 12, 2020 02:11 PM UTC

  
Hi Juan, 

Thank you for your patience. 

On further analysis the sample, the reported rendering issue occurs due to the page size for print media in CSS styles. When converting content HTML file in print media style, it takes the page size from print media style (A3), So only the reported issue occurs. We have changed the page size as A3 to A4 for print media style in bootstrap.min.css file. And we checked the conversion with margins and print media type to content html, the PDF document generated properly with repeat header and footer and the contents are not overlapped and margins are preserved properly. 

Please refer the below changes in bootstrap.min.css file.  

// Changed the page size a4 for print media in bootstrap.min.css file
@page{size:a4} 

We have attached the modified sample and output document for your reference, please try the sample in your end and let me know the result. 

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

Regards, 
Gowthamraj K 


JJ Juan Jiminez March 13, 2020 01:53 PM UTC

Thank you Gowthamraj, It looks pretty good now!

Any way to apply the page size attribute without overwritting the bootstrap source file?. It would be bad for future library upgrades and our system allows changing the page size dinamically.

GK Gowthamraj Kumar Syncfusion Team March 16, 2020 10:32 AM UTC

Hi Juan, 

Thank you for your update. 

On further analysis, we can apply the page size as A3 to A4 for print media type in WorkReport.cshtml styles itself, to avoid overwriting the bootstrap.min.css file. When converting content HTML file in print media style, the PDF document generated properly with repeat header and footer without any overlapping issue.   

// Applied the page size A3 to A4 for print media         
@@media print 
{ 
      @@page{size:a4} 
} 

We have attached the modified sample and output document for your reference, please try the sample in your end and let me know the result.  

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

Regards, 
Gowthamraj K 


JJ Juan Jiminez March 16, 2020 02:52 PM UTC

Great, thanks Gowthamraj.

By the way, in case someone finds this useful... I was able to handle a dynamic header height by using an additional "dummy" HTML converter with SinglePageLayout which calculates the header / footer height for me and then I pass that value to the fixed height converter. Something like this:


 // workaround: call the converter 2 times to get the header/ footer height
            BlinkConverterSettings heightSettings = new BlinkConverterSettings
            {
                EnableJavaScript = true,
                Orientation = PdfPageOrientation.Landscape,
                PdfPageSize = new SizeF(PdfPageSize.A4.Width, 1),
                SinglePageLayout = SinglePageLayout.FitWidth,
            };

            HtmlToPdfConverter heightHtmlConverter = new HtmlToPdfConverter(HtmlRenderingEngine.Blink)
            {
                ConverterSettings = heightSettings,
            };

            PdfDocument heightDocument;
          
           heightDocument = heightHtmlConverter.Convert(content);          

            // round up to avoid content cutting off
            int height = (int)Math.Round(heightDocument.Pages[0].GetClientSize().Height, 0);
            

            BlinkConverterSettings settings = new BlinkConverterSettings
            {
                EnableJavaScript = true,
                Orientation = PdfPageOrientation.Portrait,
                PdfPageSize = new SizeF(PdfPageSize.A4.Width, height),
            };

    {
                ConverterSettings = settings,
            };


            PdfDocument document;

            document = htmlConverter.Convert(content);

            RectangleF bounds = new RectangleF(0, 0, document.Pages[0].GetClientSize().Width, height);

SL Sowmiya Loganathan Syncfusion Team March 17, 2020 12:11 PM UTC

Hi Juan, 

Thank you for your update. 

Yes. We can use this code for getting the dynamic header/footer height with SinglePageLayout. After calculating the header/footer page height from pdf document, you can directly use the calculated height value to template bounds instead of performing one more conversion.  

Note: This code will work for header and footer height is less than the page size of pdfPage, if it is exceeded, then the conversion will throw Failed to webpage exception. 

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

Regards, 
Sowmiya Loganathan 


JJ Juan Jiminez October 28, 2020 01:31 AM UTC

Hi There,

Following up on this issue, I've found a new scenario when I change the page size to "Letter", the SinglePageLayout.FitWidth doesn't take the whole space on the header, is there a max size restriction with this approach? (see my attached sample, blue background shouldn't be visible on the header).

Thanks in advance.

Attachment: Print_media_issues_5f9adf1e_64483e98.zip

GK Gowthamraj Kumar Syncfusion Team October 28, 2020 04:13 PM UTC

Hi Juan, 

Thank you for your patience. 

Currently, we are checking the reported issue and we will update you the further details on October 30th 2020. 

Regards, 
Gowthamraj K 


GK Gowthamraj Kumar Syncfusion Team October 30, 2020 03:35 PM UTC

Hi Juan, 

Thank you for your patience. 

We have further analysed about the reported issue “Blue background visible issue in Header”. The reported issue occurs in HTML to PDF conversion with Blink rendering engine itself. You can check this behaviour by opening the URL of header HTML file in chrome browser and you can check the same behaviour in print preview. Since the issue occurs with Blink rendering engine itself, we are unable to proceed further on this. Kindly modify your HTML file of the header HTML to overcome this reported issue.  
 
Please refer below screenshot for more information, 
 
 
Regards, 
Gowthamraj K 



JJ Juan Jiminez November 3, 2020 10:29 PM UTC

Hi Gowthamraj,

Print preview looks good for me on chrome  with the exact same sample I provided (see attached image). Do you have a different / special browser setup?, are you previewing on Letter page size?



Attachment: Screenshot_20201103_172704_d3e77d39.zip

GK Gowthamraj Kumar Syncfusion Team November 4, 2020 04:26 PM UTC

Hi Juan, 

Thank you for your update. 

We have checked the reported issue in our latest chrome print preview with Letter page size. The reported issue “Blue background visible issue in Header” occurs in HTML to PDF conversion with Blink rendering engine itself. You can check this behavior by opening the URL of header HTML file and zoom in and zoom out the webpage in your latest chrome browser. Since the issue occurs with Blink rendering engine itself, we are unable to proceed further on this.  

Please find the output document from below link, 

If still you are getting an different behavior, kindly please share the browser details to check the issue in our end. So, that it will be helpful for us to analyze and assist you further on this.  

Regards, 
Gowthamraj K 


JJ Juan Jiminez November 9, 2020 08:15 PM UTC

Hi Gowthamraj,

I'm attaching screenshots of both the PDF and the header URL alone at different zoom levels. As you can see, the header URL looks good at all zoom levels while the PDF just keeps non full width (displaying blue background) at the letter size.

I'm using the latest Goolge Chrome version on a Windows 10 system. You can see both my system's and chrome's info on the attached screenshots.

Attachment: PDF_header_blue_background_issue_c720e6.zip

GK Gowthamraj Kumar Syncfusion Team November 10, 2020 01:15 PM UTC

Hi Juan, 

Currently, we are analyzing the reported issue in our end and we will update you the further details on November 12th  2020. 

Regards, 
Gowthamraj K 


GK Gowthamraj Kumar Syncfusion Team November 13, 2020 01:35 PM UTC

Hi Juan, 
 
Thank you for your patience. 
 
Due to complexity, we are still analyzing on the reported issues as it requires much deeper analysis, we will update further details on 17th November 2020 without any delay. 
 
Regards, 
Gowthamraj K 


GK Gowthamraj Kumar Syncfusion Team November 17, 2020 05:57 PM UTC

Hi Juan,  
  
Thank you for your patience.  
 
We have modified the provided sample to overcome the reported issue “Blue background visible issue in Header” by changing the page size of second converter settings in header method. Now, it is working properly and header, footer and content are added properly. We have attached the modified sample and output document for your reference. Kindly please run the below sample in your end and let us know the result. 
 
 
Please let us know if you need any further assistance with this. 
 
Regards, 
Gowthamraj K 


JJ Juan Jiminez November 23, 2020 11:47 PM UTC

Hi Gowthamraj,

Thanks for the sample fixing the blue background. I opened a new ticket to handle a similar issue as this one already has too much information. (https://www.syncfusion.com/forums/159981/unwanted-extra-padding-on-pdf-content)

Best,

GK Gowthamraj Kumar Syncfusion Team November 24, 2020 01:59 PM UTC

Hi Juan, 

Thank you for your update. We are glad to know that your problem has been solved. 

Kindly follow up on that forum #159981 to get details about the query.    

Regards, 
Gowthamraj K 


Loader.
Up arrow icon