Generate a PDF in React
HTML-код
- Опубликовано: 13 сен 2024
- Generate a PDF from HTML using JavaScript in React and Next.js.
Learn how to convert HTML to a PDF using 3 different tools including html2pdf.js that allows us to convert an HTML tree to a PDF, React PDF to render a PDF, and Puppeteer to generate a PDF from a live page. We'll even see how we can set up an authenticated session in Puppeteer in Clerk to generate a PDF from private data.
Get exclusive access to my upcoming course: spacejelly.dev...
🧰 Resources
Tutorial: spacejelly.dev...
Code: github.com/col...
📺 RUclips: ruclips.net/user/co...
🐦 Twitter: / colbyfayock
📹 Twitch: / colbyfayock
✉️ Newsletter: www.colbyfayoc...
github.com/eKo...
github.com/eKo...
clerk.com/docs...
clerk.com/docs...
🎥 What I Use: www.colbyfayoc...
#colbyfayock #pdf #javascript #nextjs #reactjs #webdevelopment
Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course
Hi Colby. Thank you for this video. I’ve been using React-PDF and I think it’s the best of the three options. However, the documentation didn’t clearly explain how to use the renderToStream method properly, and I had a lot of trouble with it, especially with TypeScript. Your solution, even though it seems like a patch, has been really helpful-thank you!
awesome, glad to hear this helped out!
@@colbyfayock better than //@ts-ignore . The solution is perfect because it is quick and it works. Avoid ts hoops
I am using jsPDF but struggling to add hyper links in table.
Links do get into the pdf but are not click able.
I was using Puppeteer to generate invoices in a serverless environment, and while it worked fine, the problem was that my computation hours were getting used up too quickly. After watching your video, I decided to give React-pdf a try. Thank you for the video ❤
Looking forward to seeing you more often in my RUclips feed.
yes! i could imagine that wasting a ton of resource time. no problem!
Omg i was just looking for this! Thanks you always for the straightforward tutorials.
No problem! 🙌
Awesome video on a niche topic. Really helpful!
Thanks glad to hear that!
You deserve 1M subscribers .
thank you! 🙌 hopefully one day haha
This was really helpfull. You just saved me from tons of research.
awesome!! glad to hear that
Puppeteer might share the session between users (especially in server based environments), maybe clerk handles invalidations fine, but I'd still be careful with it.
good call! think we'd be okay in the serverless env, but definitely need to be careful with that in server environments or working between multiple users in a single execution (probably rare tho on that one)
Thank you for sharing this , probably gonna use react pdf for a costum format and style for my invoices, I tried pdf-lib but I think its too hard when dealing with costum designs .
Really appreciate the video thank you again!
no problem!
I went into this few weeks ago! Thanks for sharing!
nice!! did you have similar findings for the available options?
Very helpful Colby as always. Thanks a ton. Can you do more advanced tutorial on React PDF?
no problem!! im not sure when id get to it but i can add that to my list. is there something particular you're hoping to learn?
Noice! Nothing like a solution that comes in at the perfect moment. I used this today 😄 Thanks!
haha fantastic 👏
Hi man thank you so much for all the tuto you have done till now , I recently completed some personal project due to your tuto on intersection observer and html dialog, everything is really smooth when concepts are explain by a pro.
Also can You please make a video on mdx with vite for a documentation or blog app.
Hey thanks happy to hear that. Not a bad idea!! As far as vite do you mean a vanilla react app with vite? I think if doing a content site I'd def want static generation or at least SSR of some sort
thank you! I was trying to generate pdf in react and had lots of problems with styling being slightly off. I guess I just need to recreate in React PDF.
glad it helped! while it requires a little extra work, i think having full control helps produce a better and more reliable format (if thats important for the use case of course!)
React-pdf/renderer is best. If you know about react native then it will be super easy to make a invoice and download without any issue. Also if you want to design with tailwindcss same as web then you can use react-pdf-tailwind.
nice find with react-pdf-tailwind!
i was just looking for this! Thanks.
no problem!
Colby, which of these options do you recommend for creating dynamic invoices that update based on user input?
@@imkir4n are you hoping to display the PDF inside of the UI as far as what you mean by updating based on user input? i haven't tried this but React PDF has a Viewer component that you can render it in the UI, I would expect it would rerender based on props like a typical React component, then once ready to generate, can utilize the method shown in this video react-pdf.org/components#pdfviewer
@@colbyfayockYes, this way I can preview the PDF nicely with page navigation and all. But the way of creating PDFs is different, right? We need to use some elements from React PDF to construct a PDF, so I'm confused - if the designs get a bit different, will I be able to style properly with the tags, since the current invoice is styled in HTML and inline css?
@@imkir4n it's the same as what i went through in the video only you use the PDFViewer component instead of the renderToStream function, that way you're maintaining the same document for viewing and exporting
thank you, this solved my problems
no problem!
its there is a better solution you can do with puppertier, which is create a new page which will only have invoice, and will be a public route, and pass in some toke? in query params verify it using that and then show contents, then you can do all the customization at react itself, and that page will be just how the final pdf looks
sounds pretty similar to the solution i came up with in the video just little differences. seems like the same amount of work for vending and validating the tokens 🤷♂
That's really interesting sir,
Can you also provide a course in which there is option to edit a pdf doc like by pen and shapes on it and download it, i have to implement same feature in my next.js app
thats a pretty interesting idea. i'm not sure that im going to get to something like that soon but you could potentially use something like this www.npmjs.com/package/react-canvas-draw or github.com/tldraw/tldraw which you can export as an image to use as your pdf content
@colbyfayock ooh that's great thanks for your guidance
Warming for people consider html2pdf sticking area I encountered were
Custom fonts and letter spacing
Pagination over many pages
Thai
Plus the image thing making accessibility impossible
Would use for simpler use cases / mvp but not for serious platforms.
Dang thanks for the heads up! Preferred react pdf anyways but good to know extra bumps
Great video 🫶
thank you!
Shame I can't use react-pdf/renderer cause everytime I install it in my create-react-app I always get the error below:
"Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit')."
oh strange, is that a conflict with an existing package that you're aware of?
You should've also covered Satori by Vercel
Iirc the reason I didn't was because font support is a bit annoying where these solutions work easily out of the box
Hi Colby I have a query
If I use reac-pdf/render can I generate Graphs and append to that pdf?
There's def an image component that you could save or embed it as base64. There are SVG components but haven't played with them.
@@colbyfayock ok I'll look after it.
I have to print without that print modal how i can do that
if you're printing to a printer from the browser there will always be the modal
Have you tried jspdf? Please share your opinion/feedback on it?
didn't look at that one because of the API. i was looking for something that was either going to transform HTML or a React-like syntax as I find the syntax they use to be a little more unfriendly for more complicated documents: github.com/parallax/jsPDF?tab=readme-ov-file#usage
being able to edit it in a standard HTML document flow was my goal
i like the puppetear way but not the part of the cloudinary cause is to dependant
yeah, Cloudinary was just an example, you could use anything there!
Nice... I am looking for a solution for a mortgage, insurance and financial website where html can be downloaded as a pdf... any real solution out there? Perhaps, even with using CSS to format the pdf... TY.
just curious did any of the solutions here not fit that need?
react-pdf together with react-pdf-html works pretty good. to just input html into react-pdf instead of building the whole template with react-pdf components
@@ThomasWapps ooo thats nice, and even seeing that example Rendering React Components, good find
you could try react-to-print. It passes element to the web print api and user can save as pdf.
You must understand any css/tailwind/html/jsx is processed as image or svg. Text is not searchable unless you use the text element supply by the pdf lib like react-pdf or pdfkit
.docx ??
one kind request. I appreciate your efforts but if it's a paid course pls use some other auth lib. not clerk. use clerk in your sponsored videos and not in paid courses.
thanks for your feedback, but just curious, why in particular do you feel that way? regardless of if it's free or paid, Clerk is a fantastic managed auth solution (that a lot of people are eager to learn)
Clerk is for noobs @@colbyfayock