ivmarcos/react-to-pdf

Pdf output pages are black if there is too much data

Opened this issue · 5 comments

Shlok-Zanwar commented

Amazing package !

I was trying to download a pdf and noticed that the pdf output is black if there is too much data.
To reproduce, You can just duplicate the cards to around 40...50 times in this https://codesandbox.io/s/ancient-violet-sznj9q?file=/src/App.tsx

I noticed that it starts happening after around 20Mb, but not sure.

Thanks!
Great work!

ivmarcos commented

Thanks @Shlok-Zanwar for checking this. This happens because of the limitations of the canvas size in the browser, it does not get rendered if the dom is too large, this is mentioned also in https://html2canvas.hertzen.com/faq.. Higher resolutions would make it worse since it scales the height, so this can be avoided with lower resolutions at the moment.

I'm thinking of some possible options to solve that, one idea I have is concatenating multiple elements/canvas into the PDF. If that works, it will be a new feature, looking into it.

  • 👍3
Shlok-Zanwar commented

I understand, Thanks for the response @ivmarcos.

  • 👍1
ycabrera90 commented

@ivmarcos excellent job with this package.

I have it in production, and I've encountered this limitation that, in my particular case, prevents me from generating more than 18 pages.

If you have any progress on this, please leave me a comment to know if I can keep this feature in my app.

I'll be attentive.

anthonyshafto commented

I'm facing the exact same issue. Thanks for the contributions to this thread, and @ivmarcos for the work you have put into creating the package!

anthonyshafto commented

In case it helps anyone who sees this now, in my case, setting the resolution value to 3 or below worked for me (c. 20 page PDF).

  • 👍1