How To Generate PDF Using kendo-react In React.js

In this article, we will learn how to generate PDF using kendo-react in React.js.

− First of all, we have to create a react application.

− Then import the below packages in your project.

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

− Install the Default theme package.

• npm install –save @progress/kendo-theme-default

− Import the CSS file from the package in src/App.js.

• import ‘@progress/kendo-theme-default/dist/all.css’;

Using the Component:

• Create a ref to the component that will later be used for the export

const pdfExportComponent = React.useRef(null);

• Create two functions that will handle the export, the first one will export with a method, and the second one will handle the component export.

const exportPDFWithMethod = () => {
let element = document.querySelector('.k-grid') || document.body;
savePDF(element, {
paperSize: 'A4'
});
};
const exportPDFWithComponent = () => {
if (pdfExportComponent.current) {
pdfExportComponent.current.save();
}
};

− Now open your app.js file and add the code given below :

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { PDFExport, savePDF } from '@progress/kendo-react-pdf';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import products from './products.json';

const App = () => {
  const pdfExportComponent = React.useRef(null);

  const exportPDFWithMethod = () => {
    let element = document.querySelector('.k-grid') || document.body;
    savePDF(element, {
      paperSize: 'A4'
    });
  };

  const exportPDFWithComponent = () => {
    if (pdfExportComponent.current) {
      pdfExportComponent.current.save();
    }
  };

  return <div>
      <div className="example-config">
        <button className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" onClick={exportPDFWithComponent}>Export to PDF with component</button>
              &nbsp;
        <button className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" onClick={exportPDFWithMethod}>Export to PDF with method</button>
      </div>

      <PDFExport ref={pdfExportComponent} paperSize="A4">
        <Grid style={{
        maxHeight: '400px'
      }} data={products}>
          <Column field="ProductID" title="ID" width="40px" />
          <Column field="ProductName" title="Name" width="250px" />
          <Column field="Category.CategoryName" title="CategoryName" />
          <Column field="UnitPrice" title="Price" width="80px" />
          <Column field="UnitsInStock" title="In stock" width="80px" />
        </Grid>
      </PDFExport>
    </div>;
};

− My product.json file data is here:

[
    {
        "ProductID": 1,
        "ProductName": "Chai",
        "SupplierID": 1,
        "CategoryID": 1,
        "QuantityPerUnit": "10 boxes x 20 bags",
        "UnitPrice": 18.0000,
        "UnitsInStock": 39,
        "UnitsOnOrder": 0,
        "ReorderLevel": 10,
        "Discontinued": false,
        "Category": {
            "CategoryID": 1,
            "CategoryName": "Beverages",
            "Description": "Soft drinks, coffees, teas, beers, and ales"
        }
    },
    {
        "ProductID": 2,
        "ProductName": "Chang",
        "SupplierID": 1,
        "CategoryID": 1,
        "QuantityPerUnit": "24 - 12 oz bottles",
        "UnitPrice": 19.0000,
        "UnitsInStock": 17,
        "UnitsOnOrder": 40,
        "ReorderLevel": 25,
        "Discontinued": false,
        "Category": {
            "CategoryID": 1,
            "CategoryName": "Beverages",
            "Description": "Soft drinks, coffees, teas, beers, and ales"
        }
    }
]

Output: