How to Create PDFs With Node JS and React

[@TheChinobi23]

Thank. You for the video. Is a nice code to implement in many applications

[@javascriptmastery]

Glad you find value in it, many more tutorials are coming soon!

[@TheChinobi23]

JavaScript Mastery awesome!! Good job

[@chris_and_music]

Thank you so much! Just a tip for anyone who is interested in just making a Post request and download the pdf WITHOUT creating it in the local computer (you will need to use Fetch instead of Axios) //Node server.post("/create-pdf", (req, res) => { pdf.create(pdfTemplate()).toBuffer(function (err, buffer) { if (err) return res.send(err); res.type("pdf"); res.end(buffer, "binary"); }); }); //React createAndDownloadPdf = () => { fetch("/create-pdf", { method: "POST", body: JSON.stringify(this.props), }).then((res) => { res.arrayBuffer().then((res) => { var blob = new Blob([res], { type: "application/pdf" }); saveAs(blob, "newPdf"); }); }); }

[@AdithyaKahawanugoda]

this method doesn't work,it shows pdf file can not open

[@afaque.]

it just solved the error I was having from html-pdf

[@afaque.]

but now ALL PDF ARE CORRUPTED so thanks but no thanks

[@AdithyaKahawanugoda]

@@afaque. means?

[@sadraquesantos9766]

I've been looking for a simple solution like this for months, thanks for the tutorial.

[@javascriptmastery]

Glad you finally stumbled upon my video! 😀

[@justinnguyen8049]

I had to watch so many videos until I found you :) Thank you so much for the great video. This is perfect for all sorts of web applications!

[@thanishahamed4755]

Cheers from Sri Lanka! Found the sollution with easy steps to use in my applications 🙂

[@sandun7266]

😉

[@alwikah5664]

Top video ! Thanks a lot ! Advice : +zoom on IDE

[@javascriptmastery]

Thanks man, I will definitely zoom it for the next vid!

[@allancoder]

All of your videos are great buddy, keep up the good work. Please increase the font size of the VS code in future videos so that the code is clearly visible on smaller screens too. 😁😃

[@javascriptmastery]

Thanks, I'm just starting out. Planning to improve the audio quality and much more. Thanks for the recommendation, I will definitely increase font size! 😀

[@andersbraathen1256]

Thank you for the tutorial!

[@sadeedkhan5344]

Thank you so much, you have no idea how big of a problem you have solved for me. God bless you!! Thanks alot for making this tutorial!!

[@animeshtimsina3660]

Thanks man! But I have some problems. Why aren't some css properties like flex supported?

[@MrMiguelapb35]

Very nice project, and very useful, thanks man

[@javascriptmastery]

Glad you like it!

[@andygolem5514]

Hi there how would get dynamic data to appear in the pdf document, more specifically if I have a list that I am sending to the pdf renderer, how can I display the list items dynamically, can I use a for loop or map function in my document template?

[@tuseeqtoor3395]

I have the same issue...Did you find any solutions?

[@rodrigomartinez1202]

Amazing video man!!

[@adityaekawade1060]

Awesome. Thank you for such a great tutorial!

[@Fullflexno]

Thank you for the video, excelent content. Cheers from Norway!

[@javascriptmastery]

Thanks man, since I am just starting, it really means a lot! Stay tuned for more! :)

[@subhashgn1775]

very well explained.

[@risingstars6852]

Thanks for great tutorial

[@girishthatte]

Thanks a lot dude ... Your video is really awesome and also had nice explanation !

[@devanshbhushan1057]

Thanks a lot!! Your code helped me a lot!!

[@johnfazio2513]

Great video, I subscribed

[@theAbdikhaliq]

Anyone not comfortable with class components. This code may work: import React, { useState } from 'react'; import axios from 'axios'; import { saveAs } from 'file-saver'; import './App.css'; const App = () => { const [state, setState] = useState({ name: '', receiptId: 0, price1: 0, price2: 0, }); const handleChange = ({ target: { value, name } }) => setState((prevState) => ({ ...prevState, [name]: value })); const createAndDownloadPdf = () => { axios.post('/create-pdf', state) .then(() => axios.get('fetch-pdf', { responseType: 'blob' })) .then((res) => { const pdfBlob = new Blob([res.data], { type: 'application/pdf' }); saveAs(pdfBlob, 'newPdf.pdf'); }); }; return ( Download PDF ); }; export default App;

[@JonoBaritaspasial]

Thanks. Very usefull

[@javascriptmastery]

Thanks! Glad you like it.

[@doufer9528]

really good video!

[@javascriptmastery]

Thanks!

[@kevinwirth2548]

Thank you. Cool Tutorial :)

[@javascriptmastery]

Since I'm just starting out, I extremely appreciate any feedback, thanks! 😊

[@fayequehannan2473]

Please zoom in your screen..its is difficult to watch on mobiles...otherwise video is great and helps me a lot..thank you

[@juhikh6544]

You are awesome!!! Thanks!!!

[@РоманМосолов-ы1ш]

Thanks for knowledges.

[@javascriptmastery]

Thank you for watching!

[@nishantkumar6960]

Thank you so much !!!

[@domy667]

great vid. Thanks!

[@javascriptmastery]

Thanks, appreciate it!

[@elie3423]

to run nodemon, type one of these in the terminal: npm install -g nodemon OR yarn global add nodemon

[@dheflowgeming]

goodjob dude

[@javascriptmastery]

Thanks!

[@shahrukhm8093]

Thank you,

[@BulletSP]

Hi, I am able to create the entire pdf , (display grid and flex-box not working) just not getting the css styling from tag.. Please help!

[@rakeshrinawa]

Great video. Can anyone tell how to apply your choice of Logo as image and use it in real life Project? Thanks

[@kamildziech2021]

Did you solve this problem? I want to know because I have the same :/

[@davidadeleye1259]

@@kamildziech2021 Have you tried saving the image in your React project folder and importing it in whatever component you want to use it in?

[@shivaprasad8919]

Can we use inside the template string? will it work

[@CipMassageTherapyToronto]

I'm just getting the error "__dirname is not defined" in my server console. The receipt is generated. Any solutions?

[@Viralvlogvideos]

please make complete JS course from zero to hero

[@javascriptmastery]

I already have one. Complete Path to JavaScript Mastery

[@Viralvlogvideos]

@@javascriptmastery not on youtube :(

[@enesgungor6788]

I have a HTML file and I want to convert it to pdf. I followed the video but my program doesnt work correctly . When I run HTML code separately it working very well but when I convert it to pdf it is crushing . Flexbox isnt work correctly . How can I fix that ?

[@dolevdo]

this is amazing video , do you have any suggestions about how to edit the number of products dynamically ?

[@akiempaul1117]

The list of products should be in an array, use the map function and return the div in string format

[@davidfry3552]

How would you do this if you wanted a multi-page pdfs? How do you specify page breaks?

[@zuzukouzina-original]

He can’t answer this question, it’s just a simple hello world code he is showing.

[@abelmurua6980]

Nice video! can I create a template using TailwindCss?

[@shneorBachar]

thanks!!!!!!! How to display images using node.js server??? INTO INDEX.JS

[@JoshuaMusau]

Awesome!

[@karamokanagi9296]

Its a good video. is it possible to get the data from the database and print a pdf file once a button is click.... Please help me this. Thanks

[@尼古拉丝土豆]

FileSaver is built for saving client side generated content, but if the content is coming from a server then there is different ways to achieve the goal of saving the file downloaded from the cloud.

[@thangtea18bec]

Can you demonstrate printing react component

[@prashant6045]

Hi really nice video . Perfectly solves my problem . Just a question how to do multiple page pdf in it ? whatever HTML I am writing its generating single page PDF only. And if header and footer can be added for each page constant will be awesome

[@samking618]

backend guys, how do you guys work with in templates (HTML & CSS) in real apps? For e.g I want to create invoice pdf using a template, so is there a way to generate templates with our desired look and feel from somewhere or we have to write HTML and CSS from scratch ourself?

[@ahmedali006]

how do i store the generated pdf to my phone (I'm developing this in react native)

[@latifjames7208]

can you create a dropdown in html and save it as pdf with dropdown format included in the pdf. meaning when it save as pdf the dropdown still option on the pdf. i want to create a form that save from html to pdf with the bottom option have a dropdown for the manager to finish fill out

[@ngneerin]

Wouldn't it be a better solution to convert react to pdf directly on frontend

[@zuzukouzina-original]

I agree with you, it’s just he only knows this method from a blog on the internet, it’s a kind of copycat

[@JadeclonOfficial]

Why is flexbox not working in the template?

[@yashmalviya9931]

I have created my template but flex are not working

[@willigeek2013]

The timing of this tutorial is perfect. i was wondering how would you access the data in the pdf file if the dynamic data were saved in a database first ( nedb ) for example ?

[@Shadyholic]

did this work for you ? even when i downloaded the files from github it still isn't working... did you had any problems ?

[@pratikshemare7116]

How to create template with Array of Objects? please reply...

[@amineselmi8380]

great tutorial , but the thing is . I dont have the Render() function generated

[@javascriptmastery]

What exactly are you referring to? What minute in the video?

[@amineselmi8380]

@@javascriptmastery When i do generate a react projet , i do no have the " class App extends component " , i just have function App { } . And the render function under it , i dont have it . I think its a new version of react and i m having issues applying your tutorial in it . would it be cool if you help me out with it ? ' discord '

[@javascriptmastery]

In that case, simply copy the render code I have. You should be good to go then.

[@syedmujeebh4401]

Pls make a video on parsing pdf with streams buffers and chunks

[@danielwaiter9990]

Is it possible to generate PDF from an object array as well ?? If so, how ? Thanks

[@aneekaatrocities2489]

Looks like this is based on phantom js . People say its deprecated and no more in future. So is this html-pdf good one to go with for future?

[@rohitdalal954]

Thank you for this tutorial mate🙌. One doubt, what if we want to include CSS file externally i.e using ? Will this still work or not?

[@javascriptmastery]

Thanks for the feedback! Feel free to try it and let me know! 😁

[@gamingdaavago174]

Is this working?

[@gamingdaavago174]

External css?

[@Victor-wh9bs]

ThankU

[@redskater42]

wonder if i can get some help, I'm getting an error where my browser is unable to open/read pdf file. Any thoughts?

[@javascriptmastery]

Did you manage to resolve the issue?

[@redskater42]

@@javascriptmastery Negative. Got the server to send the file over to the client. However there was a error with opening the .pdf file with preview and chrome did not open PDF view either. The Error message read about a a damage or altered file. I'm wondering if it is to do with my res.sendfile() statement.

[@Shadyholic]

@@redskater42 did you fix this ? make sure you have const pdfBlob = new Blob([res.data] , i switch to try something [res.data] to [res.body] and it gave me broken pdfs, but i have another problems the input aren't going into the pdf and I don't know why.

[@ArmandoHinojosaCcamaSARC]

Thank you for this ^_^ !!!

[@javascriptmastery]

Thank you for watching! :)

[@huirenchuah3597]

how to actually use this with functional component in react like hooks. Do I need to like specify const [name, setName]=useState(' ')??

[@dilshodrahmatov3058]

Can you update this tutorial? Thank you.

[@techchunk67]

.then().then() was calling api's two time in my case so it was not working So you can simply use async and await

[@TheSulaimanKhaled]

Is it just me or did he increased the speed of whatever he was saying at 8:06? I didn't understand anything. I literally had to check the speed of the video

[@EmilianoC76]

I'm downloading a pdf but when opening the file it ways it's corrupt :(

[@SarahAbouyassine]

Hii .. Thank you very much for this video its very very helpful .. but I just want to ask how can i send an array and export it and display it on the table (server html code) ?? pleaase i really need your help

[@nikicamaksimovski9964]

Great video, and very simple too. Just one problem, when I change state, and try to download the pdf, we still get the old data, and we need to download again to get the data we want.

[@nikicamaksimovski9964]

Little change in the post request fixes the problem :) app.post('/create-pdf', (req, res) => { pdf.create(pdfTemplate(req.body), {}).toFile('result.pdf', (err, response) => { if(err) res.send(Promise.reject()) else { if(response) res.send(Promise.resolve()) } }) })

[@wibbs88]

Awesome. Like the other comments.. I've been searching for a pdf generator tutorial for a while now. Also, how is it possible to create a pre-designed PDF and then just have your input fields populate it to create your pdf forms? So it's not generating the html, only the data entered? Many thanks.

[@wibbs88]

Ps: I know how to design a pdf in indesign and acrobat and to label the input fields. The question is about just the input data populating from a web form to a pre-designed uploaded pdf. Thanks.

[@javascriptmastery]

This article might help - stackoverflow.com/questions/1757397/how-can-i-merge-data-into-an-xdp-file-and-return-a-pdf-via-net

[@wibbs88]

@@javascriptmastery Thanks I'll take a look

[@androsanju2526]

Please also explain commands for Windows users.

[@kamildziech2021]

Hi, I can't upload any image to my html template. Only borders and inscription from alt=" " are visible in pdf. Do you know how to solve this problem?

[@danieldebellis5039]

Hey. Imagens can be displayed by setting . The trick is on "file:///" with 3 slashes. Hope this works.

[@kamildziech2021]

@@danieldebellis5039 yes, thanks

[@swastikagarwal8605]

@@danieldebellis5039 Hey can you help me with this im trying to configure it but its not working

[@danieldebellis5039]

Of course! What’s going wrong?? Did you tried to put the 3 slashes after “file”? Are you working on mac, linux or windows?

[@swastikagarwal8605]

@@danieldebellis5039 ya so i tried file:/// and it worked for my local path , so i put C: etc, but i cant seem to figure it out for my directory so other people can use it as well, im using a directory pretty similar as this videos creator and i have an image folder inside the server folder so right beside documents which has index.js which has the html file.

[@alanalvarado9151]

Hi, nice work. Works for react-native too?

[@trisutrisnoadri980]

If you are experiencing this error: AssertionError: html-pdf: Failed to load PhantomJS module. You have to set the path to the PhantomJS binary using 'options.phantomPath' Module 'html-pdf' needs a dependency called phantom-js. We should install prebuilt-phantomjs module on the server side via terminal cd.. cd server npm install phantomjs-prebuilt@2.1.13

[@jhmesseroux]

if i'm using fetch how can i get the res.data cause i tried with res.body , res.json() it did work , someone can help me please ??

[@bikramchettri9405]

Hey can you please update this tutorial?

[@TarcisioPqdt]

I try this: pdf.create(html, { format: 'Letter' }).toFile('result.pdf', (err) => { if (err) return res.status(500).send(err) return res.status(200).send("ok") }) but, it works only in my localhost environment. When I hosted my application on Azure, this function never returns anything! And azure gives me this error message: "The page cannot be displayed because an internal server error has occurred.". It does not execute the line: " if (err) return res.status(500).send(err)" I'm using, node 14.16.0, and my entire application works fine on Azure, only the html-pdf not works on it :( Does anyone have any ideas?

[@arpanmaji3596]

how to delete the generated file in backend after download

[@gangaprasadk]

Thanks for very helpful video. Can we use similar HTML templates to print any reports from ReactJS application. If so, can you make a video that shows how we store these templates in backend and then, based on the user choice, get a template into ReactJS application using a REST API and use it in printing a report. Thanks

[@xxMegha33xx]

Hey! I have done this and I am getting Cannot Get / error when I run my server. Can anyone please please help me with that?

[@samrat7858]

How to loop through an array inside the html template ?

[@KevinMcGee_CSSian]

Tips: (1) npm init without having it ask any questions, (2) no need for bodyParser anymore: (1) $ npm init -y . (docs.npmjs.com/cli/init) (2) The middleware bodyParser is now a part of "Express v4.16.0 onwards." (expressjs.com/en/api.html)

[@javascriptmastery]

Damn man, thanks for the tips! I didn't know that , you learn something new everyday. Thanks for the feedback, keep watching the vids! 😀

[@mohamedyoussef8835]

Awesome video +++++++++++++ 😃

[@YuriiKratser]

Hi! Thanks! Does it support Russian or Chinese languages?

[@tacituskilgore2258]

which theme do you use?

[@janmichaelbesinga3867]

html-pdf is now deprecated.

[@changhaoliu7119]

Can you explain where you put "_dirname"? Thank you!

[@raihanuddin1167]

Pls kindly help me how can use daynamic value in mongobd use pdf

[@testingpro4378]

sir i face "Internal server error 500" please suggest any solution

[@lamarlaing4997]

Hi, thanks for this video. Im using Laravel with react, does this work in that framework?

[@JahangirAlam-ox8cn]

how can I create pdf from React component ?

[@yannapolchatkaewmanewong6124]

How to save to database help me please

[@blahmezah]

Good video, but it is so hard to see your screen and the code compared to alot of coding videos I watch

[@javascriptmastery]

Don't worry, I will definitely bump up the font size for the next video! :)

[@saurabhrajput1188]

Can We Create a pdf in portrait mode

[@jayjayDrm]

ok, but how to generate a pdf from react/jsx, not from html?

[@stefanomartell8413]

Awesome video! Does this store the newly generated PDF in the backend? What I want to accomplish is that the user clicks a link and a PDF is automatically generated. All the needed data is already in the frontend. Thanks!

[@javascriptmastery]

Yes! The pdf gets stored in the server! :)

[@stefanomartell8413]

JavaScript Mastery in a database? Where exactly?

[@javascriptmastery]

@@stefanomartell8413 check 25:20 of the video, under the server directory. There is results.pdf.

[@stefanomartell8413]

JavaScript Mastery Right I see, one doubt I have about that is that say I have 200 users in my app. Whenever one of them clicks on the pdf button generation it will create a mew file and store it in my db? Or results.pdf is only a temporary file that is destroyed righr after the backend sends it to the frontend, and its overwriten by the next generated file? Thanks a lot man!

[@javascriptmastery]

@@stefanomartell8413 whenever user creates a new file, the previous one will be overwritten because it has the same name (in this case) if you want to avoid that, you may want to give every result a new id as a name. There are a lot of libraries that do that, but you could also create a timestamp in milliseconds as a name. That way, a lot of pdfs will be generated, every one under the different name. Hope I answered your question!

[@mannaimounir1358]

thanks for the Great tutorial! i need some help since i have a blank page downloaded

[@javascriptmastery]

Is the code exactly the same as in the video? You can also check the Medium article in description and then compare it.

[@mannaimounir1358]

@@javascriptmastery yes the code is the same in the video! the problem that i don't get any error, i think it's something with the create or toFile method...

[@javascriptmastery]

@@mannaimounir1358 contact me on Instagram @javascriptmastery so we can try to resolve the issue :)

[@disrael2101]

It's awesome project but lack explanation line by line for beginners, also i get 404 error on console when trying to generate the PDF, if i can send you the code link for check would be really appreciated

[@HrishikeshTS]

I seem to have an error in res.sendFile() in backend, or res.data in frontend.

[@lukasmasevicius4865]

Make sure that you have correctly entered file path in backend. I would preffer smth like this: var file = path.join(__dirname, "result.pdf"); res.sendFile(file); Also when taking the response in the frontend use .then after axios.get