How you can generate PDF from HTML in React?

Ever wondered how you would be exporting HTML or parts of our React application to pdf? Normally it can be a bit complex to export it to pdf, but in this article, we will learn about some easy steps that would be so simple.  

In this article, we will learn how you can generate PDF from HTML in React and explore how to generate a pdf from the HTML using a UI component Library that is KendoReact. We will go through some concepts of React along with a demo that will help us build a simple application with export features. 

We will follow three steps to create a project with the functionality to export HTML to pdf. Here, our steps would be to create a react application, add required packages for pdf generation, and export to pdf with two methods to do so. 

Let’s start with the first step, the creation of React Application. 

Create React Application

Let’s create a react application. I am creating an application kendo-pdf-export-demo using create-react-app, you can use any name of your choice for the application. To create our application, open the directory in which you want to create your application in VS code. You can also use the terminal to create your application. The syntax for the command is as given below: 

Syntax: 

npx create-react-application project-name

Here the “project-name” would be the variable that indicates the name of the project that we want to use. Let’s create a project named kendo-pdf-export-demo with CRA. You can copy the command given below: 

npx create-react-application kendo-pdf-export-demo

Once the command runs successfully you will see the messages as shown in the image below. This indicates that the directory of your project with all the necessary files has been created. A folder with the name “kendo-pdf-export-demo” will be created with all the dependencies installed.

Now you would be able to find a new directory inside the folder in which we ran the command for creating the application. The name of the directory will be the project name that we provided in the npx command. 

For navigating to the project directory use the command: 

cd .\ kendo-pdf-export-demo

To export the HTML to pdf we have different scenarios that we can use. We can create a component that has various HTML tags that can be used when exporting HTML to pdf for better understanding. The HTML of the component would look something as given below: 

<h1>KendoReact PDF Content Starts here...</h1> 
<img src={logo} className="App-logo" alt="logo" /> 
<p>You can export using any of the two given methods</p> 

Here we have a heading, an image, and a paragraph that can be exported. The image that I have used here is the same react logo when creating a project from scratch. We have now completed our first step which requires the creation of the project and adding some HTML and CSS (if required) to export, let’s move on to the next step. 

Installing KendoReact PDF Processing 

All KendoReact packages are distributed through npm and offer a similar installation experience. To use the PDF Generator component, start with the installation of the PDF Generator npm package and its dependencies. Use Node.js v5.0.0 or later.

Command: 

npm install --save @progress/kendo-react-pdf @progress/kendo-drawing @progress/kendo-licensing

As you might have noticed that we have installed three packages @progress/kendo-react-pdf, @progress/kendo-drawing, and @progress/kendo-licensing. So here, kendo-react-pdf is the package that would help us export our HTML to PDF.  

KendoReact is a commercial UI component library and as a part of this, you will need to provide a license key when you use the components in your React projects. You can snag a license key through a free trial or by owning a commercial license, so this is the reason the @progress/kendo-licensing package is included here. 

Let’s have a look at the HTML that we will be exporting to PDF along with the Button from KendoReact. The reason for using the KendoReact button is not particular but just for the good look and feel of the UI, if you want you can use normal HTML buttons or buttons from any other UI libraries.

<div ref={contentArea}> 
    <h1>KendoReact PDF Content Starts here...</h1> 
    <img src={logo} className="App-logo" alt="logo" /> 
    <p>You can export using any of the two given methods</p> 
     <div> 
       <Button primary={true} onClick={onExportWithComponent}> 
          Export with Component 
        </Button> 
        <Button onClick={onExportWithMethod}>Export with        Method</Button> 
  </div> 
 </div> 

Generating PDF

In this step, we will generate PDF from HTML that we have with from the step above. KendoReact provides two ways to generate PDFs, one is generating PDFs using components and another one is generating PDFs using methods.  

Before moving on to understanding both ways in detail it is important to understand some common concepts to generate the PDF. Starting with importing the kendoReact component for use that in our React component for implementation. We need to import the PDFExport and savePDF components from the PDF package. The PDFExport and savePDF provide the export and save functionality. 

Syntax: 

import { PDFExport, savePDF } from '@progress/kendo-react-pdf'; 

Using the imported component is as demonstrated in the code below: 

Let’s have a look at both the ways to generate PDFs from HTML one by one.  

Generating PDF via Component 

When generating PDF via component what we need to do is to export the content via component. So we need to find the content that we want to export, and we need to wrap that content within a tag <PDFExport> that is provided by the kendo-react-pdf package.  

Keeping in mind that we don’t need to wrap out the entire react application into the <PDFExport> tag.  

<> 
   <PDFExport ref={pdfExportComponent} paperSize="A4"> 
       <div ref={contentArea}> 
         <h1>KendoReact PDF Content Starts here...</h1> 
         <img src={logo} className="App-logo" alt="logo" /> 
         <p>You can export using any of the two given methods</p> 
         <div> 
          <Button primary={true} onClick={onExportWithComponent}> 
              Export with Component 
          </Button> 
          <Button onClick={onExportWithMethod}>Export with Method</Button> 
       </div> 
     </div> 
   </PDFExport> 
 </> 

As we can see in the image above, we wrapped the entire HTML that we want to export into the <PDFExport></PDFExport> tags. 

To export the content with the component we have an onclick handler for the button. The handler works something with the code given below: 

const onExportWithComponent = (event) => { 
    pdfExportComponent.current.save(); 
  }; 

Here let’s understand how the handler works. Here in the handler, “pdfExportComponent” is a reference to this component via React’s ref prop, so we have ref={pdfExportComponent} as shown in the code below: 

<PDFExport ref={pdfExportComponent} paperSize="A4"> 

So, on click of the button, the component will be referenced using this pdfExportComponent reference provided and another prop that we have defined is the paperSize that is used to provide the paper size of the PDF to be exported. We have provided it as A4, which is the most used.  

So overall it works by finding the reference in the component and then using that as ref and using the API to call the .save() method to export our content. 

Generating PDF via Method 

When exporting using the method, it is almost similar to what we did for exporting using components. When exporting using the method we need to define a parent HTML tag that contains all the HTML content to export. Here is the code sample from the demo we have been working on: 

<div ref={contentArea}> 
          <h1>KendoReact PDF Content Starts here...</h1> 
          <img src={logo} className="App-logo" alt="logo" /> 
          <p>You can export using any of the two given methods</p> 
          <div> 
            <Button primary={true} onClick={onExportWithComponent}> 
              Export with Component 
            </Button> 
            <Button onClick={onExportWithMethod}>Export with Method</Button> 
          </div> 
        </div> 

As we can see from the code above, we have a ref prop in our div tag which contains all the HTML content that needs to be exported. To perform this action, we have a button with onclick handler that looks as shown below: 

const onExportWithMethod = (event) => { 
    savePDF(contentArea.current, { paperSize: "A4" }); 
  }; 

Here what we need to do is call the React PDF Generator savePDF method and pass in the HTML through contentArea.current along with an object reflecting the options we want to set for the file we are exporting.  Here we have the paperSize value to A4 just as an example so that we have a clear understanding if we need to provide so.