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 :
- Create React Application
- Install React To Print Library
- Create Data HTML and PDF Component
- 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> </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.