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> <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: