Reputation: 61

How to make PDF from React?

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.

Upvotes: 5

Answers (4)

Darshil Lunagariya

Reputation: 9

1 => import import { PDFExport, savePDF } from '@progress/kendo-react-pdf';

import { PDFExport, savePDF } from '@progress/kendo-react-pdf';

2 => create download button

      <button id='print-btn' className="btn btn-danger me-2" onClick={() => downloadAsPdf()}>Download</button>

 const downloadAsPdf = (e) => {
    savePDF(pdfExportComponent.current, { paperSize: "A3" }); }

3 => Create a ref

      const pdfExportComponent = React.useRef(null);

4=> this is your component

     <div id='PrintDocument' ref={pdfExportComponent}>
                            <div class="container ">
                                <div class="card">
                                    <div class="card-header">
                                        Invoice
                                        <strong>01/01/01/2018</strong>
                                        <span class="float-right"> <strong>Status:</strong> Pending</span>

                                    </div>
                                    <div class="card-body">
                                        <div class="row mb-4">
                                            <div class="col-sm-6">
                                                <h6 class="mb-3">From:</h6>
                                                <div>
                                                    <strong>Webz Poland</strong>
                                                </div>
                                                <div>Madalinskiego 8</div>
                                                <div>71-101 Szczecin, Poland</div>
                                                <div>Email: [email protected]</div>
                                                <div>Phone: +48 444 666 3333</div>
                                            </div>

                                            <div class="col-sm-6">
                                                <h6 class="mb-3">To:</h6>
                                                <div>
                                                    <strong>Bob Mart</strong>
                                                </div>
                                                <div>Attn: Daniel Marek</div>
                                                <div>43-190 Mikolow, Poland</div>
                                                <div>Email: [email protected]</div>
                                                <div>Phone: +48 123 456 789</div>
                                            </div>



                                        </div>

                                        <div class="table-responsive-sm">
                                            <table class="table table-striped">
                                                <thead>
                                                    <tr>
                                                        <th class="center">#</th>
                                                        <th>Item</th>
                                                        <th>Description</th>

                                                        <th class="right">Unit Cost</th>
                                                        <th class="center">Qty</th>
                                                        <th class="right">Total</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td class="center">1</td>
                                                        <td class="left strong">Origin License</td>
                                                        <td class="left">Extended License</td>

                                                        <td class="right">$999,00</td>
                                                        <td class="center">1</td>
                                                        <td class="right">$999,00</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="center">2</td>
                                                        <td class="left">Custom Services</td>
                                                        <td class="left">Instalation and Customization (cost per hour)</td>

                                                        <td class="right">$150,00</td>
                                                        <td class="center">20</td>
                                                        <td class="right">$3.000,00</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="center">3</td>
                                                        <td class="left">Hosting</td>
                                                        <td class="left">1 year subcription</td>

                                                        <td class="right">$499,00</td>
                                                        <td class="center">1</td>
                                                        <td class="right">$499,00</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="center">4</td>
                                                        <td class="left">Platinum Support</td>
                                                        <td class="left">1 year subcription 24/7</td>

                                                        <td class="right">$3.999,00</td>
                                                        <td class="center">1</td>
                                                        <td class="right">$3.999,00</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-4 col-sm-5">

                                            </div>

                                            <div class="col-lg-4 col-sm-5 ml-auto">
                                                <table class="table table-clear">
                                                    <tbody>
                                                        <tr>
                                                            <td class="left">
                                                                <strong>Subtotal</strong>
                                                            </td>
                                                            <td class="right">$8.497,00</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="left">
                                                                <strong>Discount (20%)</strong>
                                                            </td>
                                                            <td class="right">$1,699,40</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="left">
                                                                <strong>VAT (10%)</strong>
                                                            </td>
                                                            <td class="right">$679,76</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="left">
                                                                <strong>Total</strong>
                                                            </td>
                                                            <td class="right">
                                                                <strong>$7.477,36</strong>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>

                                            </div>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

Upvotes: 1

Kunal Burangi

Reputation: 882

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

Upvotes: 0

Angel

Reputation: 126

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.

Upvotes: 7

Shivek Khurana

Reputation: 2146

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.

Upvotes: 5

How to make PDF from React?

Answers (4)

Related Questions