React Generate PDF Report, Export HTML to PDF Tutorial

React PDF component tutorial; In this quick guide, we will show you how to generate a pdf file from an HTML static table in react app using the react-to-print package.

This React HTML to PDF example gives you a broader idea of building the simple functionality of generating PDF in React. Furthermore, we will show you how to create reusable PDF components to convert HTML to pdf.

When I was first assigned this task, I moved heaven and earth to find the solution. Unfortunately, being a rookie react developer, I found myself in hot water.

However, this horror couldn’t continue to devastate me because I found the solution online. I discovered the react-to-print library; after using it, I fell in love with this awesome package. It helped me believe that generating HTML to PDF in react is not rocket science. This plugin is great and allows creating pdf print components in react environment in no time.

Let’s start developing the feature.

How to Create Export to PDF Component in React

  • Step 1: Install React Project
  • Step 2: Install Required Packages
  • Step 3: Create PDF Components
  • Step 4: Add Static HTML Data
  • Step 5: Update PDF Component
  • Step 6: Start React Application

Install React Project

Begin the tutorial by installing a fresh new react app; after installation, get into the project folder.

npx create-react-app react-demo
cd react-demo

Install React to Print & Bootstrap Packages

In order to build the desired feature, we need a couple of plugins to install in the react app, so run the mentioned below commands.

npm i react-to-print
npm install bootstrap

Create PDF Components

You need to create some reusable components; the gravity of the topic is more inclined towards making reusable components, so without moving heaven and earth follow the given below instructions.

Create components folder inside the src directory.

We have to conjugate the HTML to PDF related code, make sure to create pdf.component.js file in src/components folder.

Also, create data.component.js file in src/components folder.

Add Static HTML Data

We need to define the HTML table, this data will be printed and exported in PDF file format. So, head over to src/components/pdf.component.js and add the suggested code in the file.

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;

The react-to-print library offers tons of APIs that are beneficial to ramp up the PDF component’s view. You may check out the official site to play around with more features; also, to easily amplify the UI of the pdf component.

Update PDF Component

Next, import DataComponent to load the HTML data, call the DataComponent alongside ReactToPrint directive. Moreover, define the button, which starts processing HTML to PDF when clicked.

Move to the src/components/pdf.component.js file and update the following code.

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;

Eventually, we have done everything with effect from this tutorial. However, we have not yet register the PdfComponent in main App.js, so without further ado let us open the src/App.js file and insert the given below code in it.

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';

import PdfComponent from './components/pdf.component';

function App() {
  return (
    <div className="App">
      <div className="container mt-5">
        <PdfComponent/>
      </div>
    </div>
  );
}

export default App;

Start React Application

The development part is done; let us start running the react application; after invoking the development server, execute the suggested url in the browser.

npm start
http://localhost:3000

Generate PDF Report in React

Conclusion

In this React PDF tutorial, we explained how to generate PDF from HTML in React and style the PDF data using Bootstrap UI, and export from HTML to PDF. We hope you liked this tutorial.

We always believe in following the pragmatic approach; the profoundness in the process defines how easily your system behaves. But, at the same time, It also protects us from getting into the hot water.