Images in html2pdf stops rendering at a certain point

Question

Tech: vue-html2pdf, which then in turn use html2pdf and html2canvas.

I have made a generator that create a PDF based on chosen products. When selecting 10-20 products the generator works just fine and there is no issue at all. But when I increase the amount of products, at a certain point the generator just stops rendering pictures halfway through. The HTML and everything else is rendering just fine, but the images below a certain point are just not visible at all. The images usually stops rendering at page 10.

I've googled this issue for ages and have found nothing specific related to my issue. The document does not exceed the theoretical max pixel sixe, and the logger shows all images are loaded into the application. I also do not recieve any error at all (which I've seen people get when filling up the heap memory).

I figured it could still be that the images are too big, but when fetching them through a proxy that reduces size, they still stop loading at the same point, even though the size is reduced by a massive amount.

Any tips on where to continue debugging this would be greatly appreciated.

Answer 1

It seems that the issue has to do with the size of the <canvas> element that is used for rendering the content. Make sure canvas height is greater than the total height of the elements you are trying to render. You can set this passing the option height to html2camvas .