How To Generate PDF From HTML In React.JS

Introduction

In this article, we will learn how to generate PDF from html page in react.js.

Following Steps follow to generate pdf from html :

  1.  Create React Application
  2.  Install React To Print Library
  3.  Create Data HTML and PDF Component
  4.  Adding PDF Generate Component in App

First create new react application and install the react to print library.

npx create-react-app yourProjectName

Install React To Print Library

npx i react-to-print

Create Data HTML and PDF Component

Create a new  ReactPDF component under the src folder and below code in it.

import React from 'react'

const thStyle = {
    width:"100%",
};

class ReactPDF extends React.Component {
    render() {
        return (
            <table id='tblProducts' style={thStyle} className="table table-stripped table-bordered"  >
                <thead>
                    <tr>
                        <th>&nbsp;</th>
                        <th>Product A</th>
                        <th>Product B</th>
                        <th>Product C</th>
                        <th>Product D</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Company A</td>
                        <td>5</td>
                        <td>6</td>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>Company B</td>
                        <td>1</td>
                        <td>5</td>
                        <td>2</td>
                        <td>5</td>
                    </tr>
                    <tr>
                        <td>Company C</td>
                        <td>1</td>
                        <td>6</td>
                        <td>8</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td>Company D</td>
                        <td>1</td>
                        <td>2</td>
                        <td>0</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>Company E</td>
                        <td>3</td>
                        <td>0</td>
                        <td>3</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td><strong>Gross Total</strong></td>
                        <td>11</td>
                        <td>19</td>
                        <td>14</td>
                        <td>12</td>
                    </tr>
                </tbody>
            </table>
        )
    }

}

export default ReactPDF

Next create a new PDFComponent under the src folder and below code in it.

import React from 'react'
import ReactToPrint from 'react-to-print';
import ReactPDF from './ReactPDF';


class PDFComponent extends React.Component {
    render() {
        return (
            <div>
                <ReactToPrint
                    content={() => this.componentRef}
                    trigger={() => <button className="btn btn-primary ">Print to PDF!</button>}
                />
                <ReactPDF ref={(response) => (this.componentRef = response)} />
            </div>
        )
    }

}

export default PDFComponent

Adding PDF Generate Component in App

Finally, Import below code in APP.Js

import logo from './logo.svg';
import './App.css';
import React, { useEffect, useState } from 'react'
import PDFComponent from './PDFComponent';


function App() {
  return (
    <div className="App">
      <PDFComponent  />
    </div>
  );
}

export default App;

Add CSS in App.css

table,
th,
td {
  border: 1px solid;
}

#tblProducts {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  margin-top: 20px;
}

#tblProducts td,
#tblProducts th {
  border: 1px solid #ddd;
  padding: 8px;
}

#tblProducts tr:nth-child(even) {
  background-color: #f2f2f2;
}

#tblProducts tr:hover {
  background-color: #ddd;
}

#tblProducts th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #04AA6D;
  color: white;
}

Finally, Run the application.

Output

If you have any questions or face any problems about this article, please let me know in comments.

For new blogs check. here.

Thank You.

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories