How to Create PDFs With Node JS and React

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

Awesome!

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 (
<div className="App">
<input type="text" placeholder="Name" name="name" onChange={handleChange} />
<input type="number" placeholder="Receipt ID" name="receiptId" onChange={handleChange} />
<input type="number" placeholder="Price 1" name="price1" onChange={handleChange} />
<input type="number" placeholder="Price 2" name="price2" onChange={handleChange} />
<button onClick={createAndDownloadPdf}>Download PDF</button>
</div>
);
};

export default App;

Can we use <script></script> inside the template string? will it work

html-pdf is now deprecated.

Thank you for the tutorial!

Thank you

ThankU

How to custom font in PDF. 😅

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

Why is flexbox not working in the template?

Hey can you please update this tutorial?

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

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

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!

Can you update this tutorial? Thank you.

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

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

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

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

How to save to database help me please

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

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

Thank you,

please make complete JS course from zero to hero

very well explained.

I have created my template but flex are not working

how can I create pdf from React component ?

how to delete the generated file in backend after download

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 ?

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?

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

Thank you so much !!!

I stopped watching when you copied and pasted the whole template html and css!

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

Pls any one help me how to use mongodb in pdf

Great video, I subscribed

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

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

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

can i create doc files?

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

Thanks for great tutorial

I don't know but, this tutorial is not right

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

which theme do you use?

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

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