How to create a PDF file using React.js

Подписаться 7 тыс.

Просмотров 67 тыс.

50% 1

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:
www.npmjs.com/...
Source Code:
github.com/ruv...
Buy Me a Coffee ;)
paypal.me/Vict...
Hosting I use:
m.do.co/c/e924... (Get $100 in credit over 60 days)

Опубликовано:

5 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 57

@sahanweerakoon8544 3 года назад

Watch from 35:00. Stuff before that are unnecessary .

@luiza4142 3 года назад

thx

@faisalakram6825 3 года назад

Thankyou!

@lmd4881 3 года назад

this is SO awesome, have bought you coffee as a thank you :)

@VicodeMedia 3 года назад

Thanks a lot, Linda! I'm glad it helped you! :)

@sabyasachisahu6730 3 года назад

Thank you so much. I have been looking for this for a very long time.

@mariacarrero8701 2 года назад

Thank you so much!! it works fine in my own project

@VicodeMedia 2 года назад

You're welcome

@kdgyimah 4 года назад

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...

@vijayverma-ho4hk 3 года назад

Did u get the solution of your problem. please share

@kdgyimah 2 года назад

@@vijayverma-ho4hk Yes I did. Totally sorry about responding late , I just got a reply to one of my comments and I’m only seeing this in addition. I used the package “react-to-print”

@hasinpramodya9652 2 года назад

@@vijayverma-ho4hk I also had same problem but I solved it very simply update my app.css with the given app.css file. So remember to apply CSS given in the code

@chandanilama7959 2 года назад

did you solve and how plz response as soon as possible

@chandanilama7959 2 года назад

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...

@kdgyimah 4 года назад

This is my solution for getting a page as PDF using vanilla JavaScript and no package. window.print();}> Capture as PDF // 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;} }

@LeHoangNhatLam 2 года назад

This is very useful. Thank you !!!

@kdgyimah 2 года назад

@@LeHoangNhatLam You are welcome!!

@sdkosm Год назад

Amazing bro you did it

@anmol8193 2 года назад

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?

@johnsonare6452 4 года назад

Thanks, Well done

@bilalabubaker1009 3 года назад

what if the content is for 3 to 5 pages ? will it give pdf of 3 to 5 pages ?

@costafabio7072 3 года назад

Thanks 👏

@shunottarasarade6229 3 года назад

hello , npm install react-to-pdf is not installing in node modules . How to solve it . please help

@faisalakram6825 3 года назад

Thankyou so much.

@christianmagnus1003 3 года назад

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?

@galtechenterprises 2 года назад

Sir, How to add multiple pages in react-to-pdf and also make a page break.

@kshitizshah6685 4 года назад

thanks a lot

@khan_dev 2 года назад

I dont understand how to apply styles for the PDF file.

@NguyenNgocThuong-2001 Год назад

how to change size print pdf when using react-to-pdf library? I need to print words in A4 size page

@AnitaR-q5l 4 месяца назад

I am getting this error while submitting the form.. ------------------------------------------------------------------------------ Uncaught runtime errors: ERROR Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

@kristinajoycegob5555 3 года назад

Can this be send as an attachment? Can you make a tutorial pls.

@VicodeMedia 3 года назад

Thanks for the feedback. Will do my best to make one.

@kamilpedziach361 3 года назад

why i see only half of file, first half is behind the screen :d

@SonAyoD 2 года назад

i cant figure out how to add dynamic data i can map through via react pdf components. e.g. {item.data} doesn't work.

@salemouail627 3 года назад

Thanks ! :D

@VicodeMedia 3 года назад

You are welcome

@duvanaponte8590 2 года назад

esta libreria ya no la soporta react---- :(

@priyan6380 2 года назад

Hey! Thanks for sharing this! Do you have any idea about how I could capture scrollable content into pdf?

@ghilesabchiche7342 3 года назад

Hi, does it also work on components? I would like to print only a designed area not all the page Great video btw!

@SULAIMAN83536 2 года назад

Did you solve this? I really need the solution please

@ashrutpanchal Год назад

Can we send this pdf in the URL in the API for the back-end side to use/ save? If yes, how?

@yulianaquintana9361 2 года назад

Why are you still using classes?

@davidkramer6286 2 года назад

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.

@meoonlyjb9109 3 года назад

Help!!!! I lost information, it does not automatically paging

@dji713 3 года назад

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