How to make PDF from React?

前端 未结 3 879
余生分开走
余生分开走 2021-01-03 06:31

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.

相关标签:
3条回答
  • 2021-01-03 06:52

    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.

    0 讨论(0)
  • 2021-01-03 06:59

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

    0 讨论(0)
  • 2021-01-03 07:08

    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.

    0 讨论(0)
提交回复
热议问题