Also, this post is about generating PDFs whereas react-pdf is meant for displaying existing PDFs only.
If you meant to point at @react-pdf/renderer, then too, using puppeteer seems better, as you cannot render custom react components within the pdf using @react-pdf/renderer.
Actually, no. React pdf Can generate pdf on fly. I use it on production on Big applications since more than 2 years.
It's not meant to render existing pdf at all.
Take a Closer look at the documentation.
You can of course create and render custom components with react-pdf. We do it all the time. What you can't do, is use react components that target the browser DOM.
The updated link is pointing to the official website for the npm package @react-pdf/renderer. This does have a feature to generate a pdf on the fly, no doubt. It does support PDF generation, unlike the npm package react-pdf.
I wasn't successful in using mui with @react-pdf/renderer. May be I'm missing something.
Mui is only targetting the DOM. So it can not work. I said you can use custom components, but not use ones that target the DOM.
Let me expand on why i suggest anyone to use react-pdf instead of react+pupppeteer.
What are the issues with puppeteer
The author made some disclaimers about his solution not being production ready. And it's for a good reason. Not just because of paginations issues.
puppeeter is executed on backend only.
It does not scale : one instance of pdf generating will use at least 2GO and more
one instance will use a lot of CPU
huge PDF size: generating documentation for hundreds of pages is not practical as you end up with pdf size that no sane user will want to download
rendering your pdf will be slow
no interactive pdf because your pdf are based on images, not actual searchable text in pdf, no clickable links...
you will not be able to control pagination without trial and error.
What are the advantages of using puppeteer
you develop your components only once
you will be able to set it up fast. in fact, you can set this up in a day.
What are the issues with react-pdf
if you need to share components with the DOM and react-pdf :
you'll need to implement your own components that targets both the DOM and PDF (aka : TextField, CheckBox, etc). i would not recommend that path. A lot of DOM components do not make sense in the pdf world (ie: Search bar, menu, etc)
you'll need more time than puppeteer solution as you'll need to create custom components that match your design.
What are the advantages of using react-pdf
ultra light (only a few megabytes of RAM)
blazing fast pdf rendering
works on both frontend and backend
scale to serve thousands/hundreds of thousands users , even in severless environments
small generated PDF size (few Kbytes)
interactive pdf with searchable text, links, pdf annotations
pagination out of the box that just work
From an engineering point of view, using puppeteer for a small project that have really few users is ok, because you'll not have to invest too much of your time. But for large scaling projects, i would recommand using react-pdf.
You should take a look at react-pdf.
It works in nodejs as well as in browsers.
It's ultra light, a lot faster than using puppeteer.
Edit: fix URL
Current version doesn't seem to support react 18 and next 1.3, I tried but it deosn't work.
I would recommend that too!
Currently your link to react-pdf points to 'https%20//react-pdf.org'. I think it should be npmjs.com/package/react-pdf.
Also, this post is about generating PDFs whereas
react-pdfis meant for displaying existing PDFs only.If you meant to point at @react-pdf/renderer, then too, using
puppeteerseems better, as you cannot render custom react components within the pdf using@react-pdf/renderer.Actually, no. React pdf Can generate pdf on fly. I use it on production on Big applications since more than 2 years.
It's not meant to render existing pdf at all.
Take a Closer look at the documentation.
You can of course create and render custom components with react-pdf. We do it all the time. What you can't do, is use react components that target the browser DOM.
The updated link is pointing to the official website for the npm package
@react-pdf/renderer. This does have a feature to generate a pdf on the fly, no doubt. It does support PDF generation, unlike the npm packagereact-pdf.I wasn't successful in using
muiwith@react-pdf/renderer. May be I'm missing something.Mui is only targetting the DOM. So it can not work. I said you can use custom components, but not use ones that target the DOM.
Let me expand on why i suggest anyone to use react-pdf instead of react+pupppeteer.
What are the issues with puppeteer
The author made some disclaimers about his solution not being production ready. And it's for a good reason. Not just because of paginations issues.
What are the advantages of using puppeteer
What are the issues with react-pdf
What are the advantages of using react-pdf
From an engineering point of view, using puppeteer for a small project that have really few users is ok, because you'll not have to invest too much of your time. But for large scaling projects, i would recommand using react-pdf.
Thank you @ecyrbe for elaborating on the issues and the advantages.
Does it work on nextjs though ?
Yes, no worries.
HI , Can l use react-pdf on node js backend as well ? . If yes please show me how
Yes you can.
Take a look at the docs. On backend, use renderToStream to generate pdf on the fly.
l checked the documentation and l still do not understand how to generate on backend side . Please @ecyrbe assist me