How to make PDF from React?

Question

I am going to use jsPDF library in React.JS but it got error, please let me know if someone get my query. I was trying to this more than 2 days but I can't.

Answer 1

Step1:

Package.json dependencies

"jspdf": "git://github.com/MrRio/jsPDF/#76edb3387cda3d5292e212765134b06150030364",

This is due to jspdf for npm is not working.

Step2:

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 fine to me.

Answer 2

We can now also convert React components directly to pdf.

The idea is to pass the react-rendered through following transformation: DOM -> CANVAS -> PNG -> PDF

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

I've posted an answer explaining the same with more details and code samples here.

Answer 3

you can also use html2pdf.js npm instead of jspdf. it is easy to use and more bug free although internally it use jspdf