Hey everyone, let me preface this by saying: This is NOT a production ready implementation. There's several things we can implement to make this mo...
For further actions, you may consider blocking this person and/or reporting abuse
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
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.
I would recommend that too!
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
Does it work on nextjs though ?
Yes, no worries.
Current version doesn't seem to support react 18 and next 1.3, I tried but it deosn't work.
i am using phantomjs always to generate pdf, built a service in nodejs, puppeteer and Phantomjs which i use on all my apps, Nice write +1
Phantomjs is nice although it is no longer maintained, an alternative is playwright.dev which I like very much :)
This is a great article. I was stuck trying to figure this out, I almost succeeded trying to use react server to render a component to html and then use some html to pdf rendered but then the tailwind styles weren't being applied. This is a life saver. Would absolutely love a follow up for a production ready implementation with next & tailwind!
Actually, I used to rely on puppeteer in production level to generate the PDF files based on the content we have on our product. Also, we did see some of limitations you mentioned here, especially we we had to deal with different page sizes on a single document. Nice explanation btw, Kudos!
Oh wow, this is just what I was looking for. Nice write up too +1
Never seen such easy explanation before. keep it up bro 👍
Thanks, I appreciate it!
Hi,
the article is great, however, it seems that generated PDF is not searchable and the text in it is not selectable. However, chromium (and puppeteer for that matter) by default produces searchable PDF. Do you know how to resolve this? Thanks!
My resume looks identically to yours? I used React, not Next JS. When printing to PDF I just hit CMD+P on my mac and click Print to PDF. That's it. It does not do page breaks very well... perhaps I can have that with your code? Can we have the source code?
I found your repo. How about page breaks? Your CV is only one page :)
Concisely explained. ⭐
Though, I've faced issues deploying a puppeteer based solution in Docker. Stackoverflow-ing my way, I found out that you need to build the package in the Dockerfile's commands and then use it somehow.
I'm showing interest in discussing the how-tos on making this production ready and make it work as a separately deployed microservice. ✌🏻
Thank! I’ll see what I can come up with for a next post!
Is this posted in a repository ? We think we are overthinking it and erasing components we actually needed.
Thanks for sharing..!!
Also thanks for the insights @ecyrbe!!