search

alvarcarto / url-to-pdf-api

Web page PDF/PNG rendering done right. Self-hosted service for rendering receipts, invoices, or any content.
MIT License
7.03k stars 779 forks source link

Page break is not working properly #183

Open jack2jm opened 2 years ago

jack2jm commented 2 years ago

how should I prevent it?? page break is not working properly. I had attached a screenshot here.

error 1

this is my HTML page - http://52.33.128.210/pdf-htmls/test6.html

I am generating this HTML using a dynamic section. so should i prevent a proper page break?

phreniq commented 2 years ago

CSS Page-breaks are a fickle beast. In order for this to work the way you expect, there are a few rules you need to follow with the structure of your HTML. First, break-* CSS rules will only work on block-level elements; display: block; (no inline-block, flex, or grid allowed). Second, and hopefully this is no longer a thing, don't use float. Lastly, if you are using anything other than position: relative; on the elements where you want breaks applied AND their parents, your mileage may vary.

I hit a similar issue and after learning the facts above was able to make things work as expected. Good luck!

Githubant123 commented 1 year ago

how should I prevent it?? page break is not working properly. I had attached a screenshot here.

error 1

this is my HTML page - http://52.33.128.210/pdf-htmls/test6.html

I am generating this HTML using a dynamic section. so should i prevent a proper page break?

phreniq commented 1 year ago

I ended up upgrading the dependencies to get latest Puppeteer v19. Now I can use the latest CSS break-* rules (break-inside: avoid; is what you want). There were only 2 or 3 breaking changes (Winston was one of them) to work thru. It was pretty painless. You will also need to include a .puppeteerrc.cjs file to define the cacheDirectory if you are deploying to Heroku.