How to Generate PDF in React using jsPDF

In this tutorial, we are going to look at how we can easily export to PDF in React 16+ application using the jsPDF package.

A React developer may get the task of Generating PDF for various reports, forms, invoices, and other data that needs to be demonstrated to the user.

Today, we are going to learn how to export PDF in React application using the jsPDF module.

The jsPDF package is a well-known HTML5 client solution for generating PDFs. It is beneficial for generating event tickets, reports, certificates, reports, forms, invoices.

It has got more than 18k Github stars and gets downloaded 1,52,000 times weekly.

Set up React PDF Application

We first need to install the React application using npx. If you have already downloaded the React app, you can skip the step.

npx create-react-app react-pdf-tutorial

Head over to project directory:

cd react-pdf-tutorial

Use the command to run the app in the browser.

npm start

Install jsPDF Library in React App

We need to install the jsPDF library in the React application so that we can use it to generate PDF on the fly.

# for npm
npm intall --save jspdf


# for yarn
yarn add jspdf

Import jsPDF

In the next step, we need to import the jsPDF in the React component, so that we can access its API and create the PDF. Open the App.js file and add the following code inside of it.

import jsPDF from 'jspdf'

React PDF Example

We need to declare the generatePDF function; in this function, we 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.setFont('helvetica')
  doc.setFontType('normal')
  doc.text(20, 60, 'This is the second title.')

  doc.setFont('helvetica')
  doc.setFontType('normal')
  doc.text(20, 100, 'This is the thiRd title.')      

  doc.save('demo.pdf')
}

We define the new jsPDF() Object, and this method allows us to access the plugin’s methods that will help us to generate the pdf.

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

The Final Code

Here is the final code that we added in the App.js file.

// App.js

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.setFont('helvetica')
      doc.setFontType('normal')
      doc.text(20, 60, 'This is the second title.')

      doc.setFont('helvetica')
      doc.setFontType('normal')
      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;

i hope you like this article.

Author : Harsukh Makwana