In this video we will create a React.js app which will generate a PDF file. We will create a form and when submitting the form all the date will be outputted to the screen on a separate page from where we will be able to generate a PDF file with the content from the form.
React to PDF:
Source Code:
Buy Me a Coffee 😉
Hosting I use:
(Get $100 in credit over 60 days)…(read more)
Convert Word 2 PDF: Word to PDF Converter
Convert PowerPoint 2 PDF: PPT to PDF Converter
Convert Excel 2 PDF: Excel to PDF Converter
Convert an Image 2 PDF: Image to PDF Converter
Convert HTML 2 PDF: HTML to PDF Converter
More Tools: PDF Converter
Amazing bro you did it
Why are you still using classes?
how to solve PDF page was looking pixelated and not so clear than it really was and I couldn't print the full screen like you showed if the page had a lot more content…
Is it static or dynamic
1 big page?
Sir, How to add multiple pages in react-to-pdf and also make a page break.
Hey! Thanks for sharing this! Do you have any idea about how I could capture scrollable content into pdf?
esta libreria ya no la soporta react—- 🙁
i cant figure out how to add dynamic data i can map through via react pdf components. e.g. <Text>{item.data}</Text> doesn't work.
I tried using this, works fine for a single page, but if the content is more than 1 page, a new page isn't getting added automatically, unable to find a solution, could you please help?
Thank you so much!! it works fine in my own project
I dont understand how to apply styles for the PDF file.
I'm trying to find a way to send genereted pdf to backend so i can save it. If you know how to make that can you plase make tutorial or just tell me how to do it.
this is SO awesome, have bought you coffee as a thank you 🙂
Thankyou so much.
Thank you so much. I have been looking for this for a very long time.
what if the content is for 3 to 5 pages ? will it give pdf of 3 to 5 pages ?
why i see only half of file, first half is behind the screen :d
Hi, does it also work on components?
I would like to print only a designed area not all the page
Great video btw!
Hello, thanks for this tutorial.
I have a problem: my pdf is generated as an image non pdf type.
Is it possible that the pdf contains several pages?
Thank you
hello , npm install react-to-pdf is not installing in node modules . How to solve it . please help
Thanks ! 😀
Help!!!! I lost information, it does not automatically paging
Can this be send as an attachment? Can you make a tutorial pls.
What happens if i want to send this pdf file to backend to save it, how i should send this pdf if i not press pdf create button?
how can i add a datepicker to the PDF?
Watch from 35:00. Stuff before that are unnecessary
.
How to do this in react,jsx file sir?
This is my solution for getting a page as PDF using vanilla JavaScript and no package.
<button className="dontPrint" onClick={() => window.print();}> Capture as PDF </button>
// This will print the whole page as a PDF
To prevent the button itself from showing in the PDF file,
Add this style to your css:
@media print {
.dontPrint { display: none !important;}
}
Great tutorial, works just as expected.
My problem using this package was the generated PDF page was looking pixelated and not so clear than it really was and I couldn't print the full screen like you showed if the page had a lot more content…
This doesn't seem to be working for me, my pdf is coming to be blank
Thanks, Well done
thanks a lot
thanks