React 18 Display PDF Tutorial – Generate PDF in React with jsPDF

In this tutorial, we are going to learn how we to generate PDF file in React using jsPDF package, and React functional component on a button click.The jsPDF library is imperative library when it comes to create custom PDF viewer in React.

PDF files are used to display essential data, at the same time vastly useful for generating event tickets, reports, certificates, reports, forms, invoices.

Not just that, but you can also use PDF files to share the information via a PDF file to anyone.

In this basic React PDF viewer tutorial we will create a basic functionality. However you can use React hooks to add custom functionalities in PDF files.

To implement PDF generator in React you will have to follow step by step process.

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.

npm install jspdf --legacy-peer-deps

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 Generate Example

The following code will guide you, how to export PDF in React application using the jsPDF module especially in a functional component.

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

import React from "react";
import jsPDF from "jspdf";

function App() {
  const 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");
  };

  return (
    <div>
      <button onClick={generatePDF} type="primary">
        Download PDF
      </button>
    </div>
  );
}

export default App;

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.

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.

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.

Conclusion

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.

In this small guide, we have learned how to create PDF file using custom function, and how to download PDF file in React and quite easily export to PDF in React application using the jsPDF package.

Reference: https://www.npmjs.com/package/jspdf