React JS Generate PDF From Html Example

In this tutorial, you will learn how to create a pdf from HTML in React JS using npm i react-to-print library.

How to Generate PDF From HTML in React JS

In this example, let’s create a simple list and export this list to PDF format using react-js npm i react-to-print library:

Step 1 – Create React App

Run 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 Package

In this step, execute the following commands to install the bootstrap library into your react app:

npm install bootstrap --save

Import 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>How to Add Google Map in React Js App</h2>
    </div>
  );
}
export default App;

Step 3 –  Install Print PDF Library React

Run the following command to install the google-map-react package:

npm i react-to-print

Step 4 – Create HTML and PDF Component

Create DataComponet.js in src folder, and then display data with convert HTML to pdf button in 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 – Add PDF Component in App.js

In this step, you need to add 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">
      <GoogleMapComponent />
    </div>
  );
}
export default App;

Conclusion

In this tutorial, you have learned step by step how to create a pdf from HTML in React JS.

Recommended React Posts