How to print table data into pdf file using ReactJS

In this article, we will learn how to print table data as a pdf in ReactJS. Create a ReactJS web page that will display some data in a table format, Implement a print button around the table, and when the user will click on the print table option the table data will be converted into a pdf and the user also can save or print it as pdf.

Steps to print table data into pdf file using ReactJS
  • Setup the environment
  • Create a table with Some data in it.
  • Install jspdf-autotable npm package in the project directory
  • Print out the table as a pdf

Setup the environment

  • Create a functional component inside src folder in the project directory.

import React from 'react';

const TableToPDF = () => {
    return (
        <div>
            
        </div>
    );
};

export default TableToPDF;
  • Import this component into the App.js file
import TableToPDF from "./components/TableToPDF";
import React, { useState, useEffect } from "react";
import TableToPDF from "./components/TableToPDF";

const App = () => {

  return (
    <div >
      <TableToPDF />
    </div>
  );
}

export default App

Create a table with data in reactJS

  • Go to the newly created component and create a table there.
import React from 'react';

const TableToPDF = () => {
    
    return (
        <div className='w-2/3 mx-auto mt-16'>
            <div class="overflow-x-auto">
                <table class="table w-full">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Name</th>
                            <th>Job</th>
                            <th>Favorite Color</th>
                        </tr>
                    </thead>
                    <tbody>

                        <tr>
                            <th>1</th>
                            <td>Cy Ganderton</td>
                            <td>Quality Control Specialist</td>
                            <td>Blue</td>
                        </tr>

                        <tr class="active">
                            <th>2</th>
                            <td>Hart Hagerty</td>
                            <td>Desktop Support Technician</td>
                            <td>Purple</td>
                        </tr>

                        <tr>
                            <th>3</th>
                            <td>Brice Swyre</td>
                            <td>Tax Accountant</td>
                            <td>Red</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    );
};

export default TableToPDF;

  • Add a button; so that the table data can be downloadable with the button click
<button className='btn my-6'>Download Table</button>

Note: we are using Tailwind CSS and DaisyUI to style the component. To know more details, Read This Article.

Create PDF for table data in ReactJS

Install jspdf-autotable npm package

  • Open command prompt from the project directory and install npm i jspdf-autotable

  • After installing, go to the table component and import, jsPDF and autotable
import jsPDF from "jspdf";
import autoTable from 'jspdf-autotable';
  • Give the table an id
<table class="table w-full" id='table_with_data'>
  • Write the below code inside the function of the component.
 const doc = new jsPDF();
 autoTable(doc, { html: '#table_with_data' })
const TableToPDF = () => {
    const doc = new jsPDF();

    autoTable(doc, { html: '#table_with_data' })
    
    return (
  • Create a function that will trigger whenever a click happens on the button.
const downloadTable = () => {
        const doc = new jsPDF();
        autoTable(doc, { html: '#table_with_data' });
        doc.save('table.pdf')
    }

doc.save('name_you_want_to_give.pdf') will be the name of the pdf while downloading.

  • Create an onClick event handler on the button.
<button onClick={downloadTable} className='btn my-6'>Download Table</button>
import React from 'react';
import jsPDF from "jspdf";
import autoTable from 'jspdf-autotable';


const TableToPDF = () => {
    const doc = new jsPDF();

    autoTable(doc, { html: '#table_with_data' })
    const downloadTable = () => {
        const doc = new jsPDF();

        autoTable(doc, { html: '#table_with_data' });
        doc.save('table.pdf')
    }
    return (
        <div className='w-2/3 mx-auto mt-16'>
            <button onClick={downloadTable} className='btn my-6'>Download Table</button>
            <div class="overflow-x-auto">
                <table class="table w-full" id='table_with_data'>
                    <thead>
                        <tr>
                            <th></th>
                            <th>Name</th>
                            <th>Job</th>
                            <th>Favorite Color</th>
                        </tr>
                    </thead>
                    <tbody>

                        <tr>
                            <th>1</th>
                            <td>Cy Ganderton</td>
                            <td>Quality Control Specialist</td>
                            <td>Blue</td>
                        </tr>

                        <tr class="active">
                            <th>2</th>
                            <td>Hart Hagerty</td>
                            <td>Desktop Support Technician</td>
                            <td>Purple</td>
                        </tr>

                        <tr>
                            <th>3</th>
                            <td>Brice Swyre</td>
                            <td>Tax Accountant</td>
                            <td>Red</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    );
};

export default TableToPDF;

Print out the pdf

  • Just simply click on the button with the onClick event handler

  • A download window will pop up.

  • Click on save; the table will be downloaded as a pdf on the computer.

This is how we can simply download tabular data as a pdf in ReactJS.