React JS – PDF From Html Example

React js create pdf from HTML example. In this tutorial, you will learn how to create a pdf from HTML in React JS. And as well as how to export HTML data as pdf in react js app.

PDF stands for “portable document format”.  Essentially, the format is used when you need to save files that cannot be modified but still need to be easily shared and printed.  Today almost everyone has a version of Adobe Reader or other program on their computer that can read a PDF file.

Like in React js App you are developing a shopping or ticket booking application. Then the user has to download an invoice, ticket etc. So for this, you have to add the option to export PDF in your React Jas application.

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.

How to Generate PDF Report, Export HTML to PDF In React JS

Just follow the following steps and how to create a pdf from HTML in React JS. And as well as how to export HTML data as pdf in react js app:

• 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 – Add PDF Component in App.js

Step 1 – Create React App

In this step, 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

In this step, execute 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>How to Add Google Map in React Js App</h2>
    </div>
  );
}

export default App;

Step 3 –  Install Print PDF Library React

In this step, execute the following command to install the google-map-react package:

npm i react-to-print

Step 4 – Create HTML and PDF Component

In this step, visit the 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 – 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

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

Recommended React Posts