Images splitting on page break with Blink engine's HTML to PDF

[Juan Jiminez]

Hi SF,

I'm trying to generate a PDF using the blink converter (HTML to PDF from a URL) but the images are cutting off on page break if I include a footer. It does work correctly (by pushing all images to the next page) if I don't include the footer. (See the attached code sample).

This ticket may be related to https://www.syncfusion.com/forums/159895/images-missing-on-page-break-with-blink-engines-html-to-pdf but in that case the images aren't displaying at all and in this case Chrome's print preview doesn't cut off the images so I figured it could be something else.

Attachment: Cut_off_images_3a23bf25.zip

[Gowthamraj Kumar]

Hi Juan, 

 

Thank you for using Syncfusion products. 

 

We have checked the provided sample in our end, but it spilt the images on both the cases (with and without footer). We have attached the output document for your reference. Please find the output from below link, 

Documents: https://www.syncfusion.com/downloads/support/forum/160956/ze/Document-621303434  

 

Kindly provide more details such as output documents (with and without footer) 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 

[Juan Jiminez]

Hi Gowthamraj,

I changed the ticket title, the issue is indeed images splitting up, is this the default behavior?, in that case, is there anything we can do to prevent that so it displays entire images (without splitting) on the new page?

[Gowthamraj Kumar]

Hi Juan, 

Thank you for your update.  

As we said earlier, we internally make use of chromium executable in headless mode for converting HTML to PDF using Blink rendering engine. The converter will preserve the PDF document, like how the input HTML file displayed in chromium based web browsers. Those image split are happens in chrome print preview itself. We have attached a screenshot of the provided webpages view in chrome print preview for your reference.  

 

In out converter setting, these SplitImages and SplitTextLines property does not have any effect with the Blink rendering engine. To overcome this image split on pagination, we can use “page-break-before” or “page-break-after” styles to that particular <div> element in the HTML source. Then it will be automatically page break before/after that <div> element in the PDF document. We have attached the input and output PDF documents with page break for your reference. 

page-break-before: always; 

page-break-after: always; 

Please try the above suggestions on your end and let us know if it is suits your requirement.   

Regards, 

Gowthamraj K 

[Juan Jiminez]

Thanks Gowthamraj,

I can't use page-break-before: always; because my content is dynamic so I would have to do some fancy programming to determine when to apply it, however, your answer gave me a hint on how to approach this issue.

Using page-break-inside didn't work because I'm using flexbox (with bootstrap) so I ended up faking the flexbox with these classes:

    .row-flex {

        display: table;

    }

    .col-flex {

        display: inline-block;

    }

I'm attaching a sample with the solution for future reference.

Attachment: Cut_off_images_797af3e9.zip

[Gowthamraj Kumar]

Hi Juan, 

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

Regards, 

Gowthamraj K