How to make PDF from React?

Question

I am going to use the jsPDF library in React.JS, but it got an error, let me know if someone receives my request. I tried to do this for more than two days, but I can’t.

Answer 1

Step 1:

Package.json dependencies "jspdf": "git: //github.com/MrRio/jsPDF/#76edb3387cda3d5292e212765134b06150030364", This is because jspdf for npm does not work.

Step 2:

Add print function

onPrint() { const { vehicleData } = this.props.parkedVehicle; const { plate_no, max_time, entry_date_time, exit_date_time, expiry_time, address1, address2, city, state, zip, country, parking_status } = vehicleData; var pdfConverter = require('jspdf'); //var converter = new pdfConverter(); //var doc = converter.jsPDF('p', 'pt'); var doc = new pdfConverter('p','pt','c6'); doc.setFontSize(22); doc.text(20, 50, 'Park Entry Ticket'); doc.setFontSize(16); doc.text(20, 80, 'Address1: ' + address1); doc.text(20, 100, 'Address2: ' + address2); doc.text(20, 120, 'Entry Date & time: ' + entry_date_time); doc.text(20, 140, 'Expiry date & time: ' + exit_date_time); doc.save("test.pdf"); } 

And it worked well for me.

Answer 2

Now we can also convert React components directly to pdf.

The idea is to convey the processed reaction through the following conversion: DOM → CANVAS → PNG → PDF

For DOM to Canvas, we can use the html2canvas library. Canvas to PNG straightforward. From PNG to PDF, we can use jsDom.

I posted an answer explaining the same thing with more details and code examples here .