HTML to PDF with page breaks added using Javascript shows difference with the raw HTML

I'm using the API to send HTML code which contains CSS and Javascript files.

In my setup options, I don't specify any page width or page height (I like the default ones). I only specify the pdf scaling factor and I set it to 1.

One javascript file goes through the elements in the body tag one by one and adds their outer height to a counter. When the total exceeds the value of 1135px, I add an empty div tags (with the CSS page-break-after set to always) before and then I restart my counter to 0.

In my CSS, I have set the max width of my #Wrapper element to 759px (which is the width of the page when printed as a PDF).

I've made several tests and it's working quite well but not 100% perfect all the times unfortunately.

I've loaded the raw HTML in a browser (Chrome) to check and also to see the javascript debugging values and calculations and it seems to work fine. The calculations are correct.

However, when I send it to the API, I noticed that the script adds the page breaks at different places (compared to where they show on the browser) sometimes (often there is a white space at the end of a page and based on my script logic, more content from the following page could have been added there instead).

I've also noticed other differences between the browser display and the PDF display : Some text show on 2 lines in the browser and 3 on the PDF (despite the max-with call which ensures the width one the browser is the same than on the PDF).

Those small differences are a bit of a problem because some page breaks get added too early or too late sometimes.

Does anybody know what's happening or have any recommendations ?

Regards

Hello,

Is there any way for us to reproduce this?

Hi Support,

Please find attached an HTML file with all the CSS and Javascript files included.

Find the API call settings I used in my original post.

Thanks for your assistance.

Regards

I am finding that page breaks are not working for me either. I am not using dynamic Javascript.

https://pdfcrowd.com/forum/archive/read/?3,2646

Hi,

Just a suggestion -

I discovered in my example that the page breaking is sensitive to the HTML. Specifically I made sure the HTML was fully valid, and then I wrapped each page in a div tag. At that point the page breaking worked.

WILL

Hello,

We were unable to find out why your script does not work with our service. I would recommend that you remove your JavaScript code that dynamically inserts page breaks, set { page-break-inside: avoid; } on elements that you don't want to have split over multiple pages, statically use "page-break-after:always" where appropriate and let the rest on our system.