How to generate PDF in React.js Application

While working on web/mobile applications, It is a very common requirement to generate pdf to share forms, invoices with the user. There are various packages available in different languages for achieving this task. If we talk in Angular or React jsPDF is very commonly used for this task. It has got more than 18k Github stars and gets downloaded 1,52,000 times weekly.

In this article, We will how to generate simple PDF file in React application using jsPDF package.

Let's Get Started

Create basic React App

Create a basic application entering below command over the terminal.


npx create-react-app react-pdf-app

Install jsPDF package using NPM


#for NPM

npm install --save jspdf

#for yarn

yarn add jspdf

Imported installed package

Next task is to import the above-installed package into app component. So open App.js file and add below code on top.


import jsPDF from 'jspdf'

jsPDF examples

In the below code we will see how to create jsPDF function object and how to use different methods to perform the task.


generatePdf = () => {

var doc = new jsPDF('p', 'pt');

  doc.text(20, 20, 'This is the first page title.')
  doc.setFont('helvetica')
  doc.setFontType('normal')
  doc.text(20, 60, 'This is the content area.')
  doc.addPage() // this code creates new page in pdf document
  doc.setFont('helvetica')
  doc.setFontType('normal')
  doc.text(20, 100, 'This is the second page.')

doc.save('sample-file.pdf')
}

doc.text() is used to set the text with the position. The first two arguments are the position coordinates X,Y for the text.

doc.setFont() is used to set the specific font for the text

doc.addPage() is used above to create a new page in the pdf.

doc.save() takes the name of the pdf file as an argument

App.js complete code


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

class App extends React.Component {

  constructor(props) {
    super(props)
  };

  generatePdf = () => {

    var doc = new jsPDF('p', 'pt');

    doc.text(20, 20, 'This is the first page title.')

    doc.setFont('helvetica')
    doc.setFontType('normal')
    doc.text(20, 60, 'This is the content area.')
    doc.addPage() // this code creates new page in pdf document
    doc.setFont('helvetica')
    doc.setFontType('normal')
    doc.text(20, 100, 'This is the second page.')


    doc.save('sample-file.pdf')
  }

  render() {
    return (
      <div>
        <button onClick={this.generatePdf} type="primary">Download PDF</button>
      </div>
    );
  }
}

export default App;

Finally, now run the app on the terminal using command npm start and check the functionality on browser.

Conclusion

In this article, We learn how to generate PDF file in React application with.

I hope this article helped you. You can also find other demos at React.js Sample Projects here to start working on enterprise-level applications.

Let me know your thoughts over email pankaj.itdeveloper@gmail.com. I would love to hear them and If you like this article, share it with your friends.

Thank You!

This article is originally posted over jsonworld