React JS Create PDF From Html and Download Example

React js create pdf from HTML example. In this tutorial, i am going to show you how to generate a pdf from HTML in React JS. And as well as, show you how to export HTML data as pdf in react js app.

React Generate PDF From HTML and Download PDF

• Step 1 – Create React App
• Step 2 – Install Bootstrap 4 Package
• Step 3 – Install Print PDF Library React
• Step 4 – Create HTML and PDF Component
• Step 5 – Import PDF Component in App.js

Step 1 – Create React App

Open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

Note that, if you are not new to react and already understood this process, then you can ignore above step no 1.

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install Bootstrap 4 Package

Run the following commands to install boostrap 4 library into your react app:

npm install bootstrap --save

Then, Add react router and bootstrap.min.css file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
  return (
    <div>
      <h2>React generate pdf from html</h2>
    </div>
  );
}
export default App;

Step 3 –  Install Print PDF Library React

Run the following command to install the react pdf print package:

npm i react-to-print

Step 4 – Create HTML and PDF Component

Go to src directory of your react js app and create HTML data component named DataComponent.js. And add the following code into it:

import React from 'react';
const thStyle = {
    fontFamily: "Anton",
    fontWeight: "normal",
    fontStyle: "normal"
};
  
class DataComponent extends React.Component {
    render() {
      return (
        <table style={thStyle} className="table">
          <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>
          <caption>Previously sold products</caption>
        </table>       
      );
    }
  }
  export default DataComponent;

Then create PdfComponent.js and add the following code into it:

import React from 'react';
import ReactToPrint from 'react-to-print';
import DataComponent from './data.component';
class PdfComponent extends React.Component {
    
    render() {
      return (
        <div>
          <ReactToPrint
            content={() => this.componentRef}
            trigger={() => <button className="btn btn-primary">Print to PDF!</button>}
          />
          <DataComponent ref={(response) => (this.componentRef = response)} />
        </div>
      );
    }
}
export default PdfComponent;

Step 5 – Import PDF Component in App.js

Import PdfComponent.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import PdfComponent from './PdfComponent';
function App() {
  return (
    <div className="App">
      <PdfComponent  />
    </div>
  );
}
export default App;

Conclusion

React js create pdf from HTML example. In this tutorial,You have learned how to generate a pdf from HTML in React JS. And as well as, show you how to export HTML data as pdf in react js app.

Recommended React Tutorial