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
andautotable
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.