Generate PDF In React With jsPDF- React PDF Example

Friends, in this tutorial, we will learn a new thing. We will get to know how to export PDF easily in React 16+ applications. We will be using jsPDF package for doing so.

The task of generating PDF may be given to a REact developer for various reports, forms, data and invoices that are required to be demonstrated to the user.

The jsPDF package, which we will be using today for exporting PDF in React apps, is a well-known HTML5 client solution for generating PDFs.

Nowadays, it is quite beneficial for generating event tickets, reports, certificates, forms, invoices, etc.

Let’s see now which steps have to be followed to:

How to Generate PDF In React With jsPDF

Step 1- Set Up React PDF Application

The very first or basic step is to install the React application using npx. Just skip this instruction if you have already done it.

npx create-react-app react-export-pdf-example

Now, we head over to the project directory.

cd react-export-pdf-example

Next, we will use the command to run the application in the browser.

npm start

Step 2- Install jsPDF Library In React App

In this step, there is a need to install the jsPDF library in the React app for using it to generate the PDF on the fly.

# for npm
npm install jspdf --save


# for yarn
yarn add jspdf

Step 3- Import jsPDF

Further, here, we have to import the jsPDF in the React component, so that we can easily access its API and create the PDF. Now, we will open the App.js file and add the following code inside of it.

import jsPDF from 'jspdf'

Step 4- React PDF Example

So, here we will declare the generatePDF function. IN this function, we have to define the methods that will create the single line of text in the PDF example.

generatePDF = () => {
      var doc = new jsPDF('p', 'pt');
      
      doc.text(20, 20, 'This is the first title.')

      doc.addFont('helvetica', 'normal')
      doc.text(20, 60, 'This is the second title.')
      doc.text(20, 100, 'This is the thrid title.')      

      
      doc.save('demo.pdf')
}

We define the new jsPDF() Object and with the help of this method, we will access the plugin’s method. That will help to generate the PDF.

In this example, we have used the doc.save() method. This method takes the PDF name as an argument. This will be connected to the button click event and start downloading the PDF as soon as the user clicks on the download PDF button.

Step 5- The Final Code

We added the following final code in the App.js file.

import React from 'react';
import jsPDF from 'jspdf'

class App extends React.Component {
   
    constructor(props) {
        super(props)
        this.state ={}
    };

    generatePDF = () => {
      var doc = new jsPDF('p', 'pt');
      
      doc.text(20, 20, 'This is the first title.')

      doc.addFont('helvetica', 'normal')
      doc.text(20, 60, 'This is the second title.')
      doc.text(20, 100, 'This is the thrid title.')      

      
      doc.save('demo.pdf')
    }   
    
   render() {
      return (
         <div>
            <button onClick={this.generatePDF} type="primary">Download PDF</button> 
         </div>
      );
   }
}

export default App;

Summary

So, here we reach the conclusion of this tutorial in which you have seen how we generated PDF in React app with the help of jsPDF. Hope that you found the above steps really easy to implement.

Category: React