How to generate a PDF from a React component

Рет қаралды 14,993

Күн бұрын

Пікірлер: 36

@GleristonCastro Ай бұрын

I was exactly a few hours away planning to research this because I'm going to use it in a project I'm doing. And thank you for the video and also for your effort in making the video available in several languages. This will help a lot of people, you gained a subscriber.

@CandDev Ай бұрын

thank you 👋🏻

@iabhitech Ай бұрын

Avoid directly creating pdf via image, unless there is only image, it will blur the pdf on zoom and text will be not selectable.

@CandDev Ай бұрын

you're absolutely right about the text not being selectable, but we can fix the blur by adjusting the scale. Thanks for the feedback

@abdarker Ай бұрын

exactly

@florianrichter4180 Ай бұрын

i did it with Puppeteer. yes it's a bit more complicated but it works great and i have it OCR ready right away

@tiptrcks3960 29 күн бұрын

Bro why do even use that technique of embedding literally a screenshot to a pdf? Use react-pdf library for that purpose It provides components like view, text etc that renders to native pdf components that are not screenshots and are selectable, and copy able and you can use css to customize it as well(only limitation is you can't use grid) no formating issue whatsoever 😅

@shubhampawar7921 Ай бұрын

Or you could just write css to hide elements when printing and then "Generate PDF" button simply does Ctrl-P shortcut. This way you save installing/maintaining extra packages

@haiderjaafer8164 Ай бұрын

Great lesson... Can make lesson on how to run reports in nextjs typescript... So can print reports example of jasper reports

@alitonoliveira1700 26 күн бұрын

Dynamic graphs or charts would be awesome.

@CandDev 25 күн бұрын

great idea.

@iSoul95 28 күн бұрын

Brilliant tutorial, thank you- Bytheway, the way you pronounce 'height' really confused me and I ended up scrolling back a couple of times the first time you explained what the 'w' and 'h' represented! The 'gh' is silent and isn't pronounced (Hite). Again, great stuff 💪

@CandDev 27 күн бұрын

thank you, Sorry about my pronunciation, my English isn’t perfect, but I’m working on it. Glad you found the tutorial helpful.

@iSoul95 26 күн бұрын

@@CandDev No worries at all! Keep up the excellent work

@kimtoshi_444 Ай бұрын

Great knowledge 🎉❤

@pasindu0528 Ай бұрын

But in this case we must render the design if we need to convert several pages then how to handle it. all pages should render, are there any alternative solution

@CandDev Ай бұрын

for multi page pdf generation, you can create an array of page components: const pageComponents = [ , , ]; // generating PDF for (let i = 0; i < pageComponents.length; i++) { // Add a new page after the first page if (i > 0) { pdf.addPage(); } } but for more complex multi page pdf you can use react-pdf.

@ardianhotii 29 күн бұрын

@@CandDev great video thank you so much also can you please make a video using react-pdf to do this , like for example I want the header to be in all pages and the body of the pdf is too large so it can't fit in one page but has to continue in other pages with the same header and footer , please I would love that , if you do please reply here when you upload it if possible

@sashaBejenari Ай бұрын

Thx! I have a weird bug. I have a form with inputs and the value from inputs are half hidden from bottom border of the inputs. I use shadcn.

@sanketgawande3667 Ай бұрын

The only problem with this approach is that the text is not selectable since it converts html content into canvas. If you need this for really serious stuff, go with puppetter package, create pdf on backend.

@CandDev Ай бұрын

you are right about the text issue. for professional pdf with selectable text, use Puppeteer or server-side PDF generation. These methods create better quality documents compared to image-based canvas conversion.

@simmslabs 29 күн бұрын

Puppeteer is the best way. this approach changes the styles of some component. Even look at the header styles which doesnt sit well. Trust me ive been here before.

@bibarud3018 27 күн бұрын

Or simply, we can use the browser's native print API. It keeps the OCR.

@CandDev 27 күн бұрын

there's no right or wrong, it really depends on what you want to implement. Sometimes, users can't rely on the browser's native print API, so options like this are helpful.