PDF Export Overview

The GridPDFExport component provides options for exporting the content of the KendoReact Data Grid to PDF.

The Grid component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Getting Started

To enable the PDF export, wrap the Grid with the GridPDFExport component. To initiate the PDF export, use the save method.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column, GridToolbar } from '@progress/kendo-react-grid';
import { GridPDFExport } from '@progress/kendo-react-pdf';
import { sampleProducts } from './sample-products.jsx';

class App extends React.Component {
    gridPDFExport;
    total = sampleProducts.length;
    pageSize = 5;

    state = {
        data: sampleProducts.slice(0, this.pageSize),
        skip: 0,
        exporting: false
    };

    render() {
        const grid = (
            <Grid
                data={this.state.data}
                pageable={true}
                onPageChange={this.pageChange}
                pageSize={this.pageSize}
                total={this.total}
                skip={this.state.skip}
            >
                <GridToolbar>
                    <button
                        title="Export PDF"
                        className="k-button k-primary"
                        onClick={this.exportPDF}
                        disabled={this.state.exporting}
                    >
                        Export PDF
                    </button>
                </GridToolbar>
                <Column field="ProductID" title="ID" width="50px" />
                <Column field="ProductName" title="Name" width="300px" />
                <Column field="Category.CategoryName" title="Category" />
                <Column field="UnitPrice" title="Price" />
                <Column field="UnitsInStock" title="In stock" />
                <Column field="Discontinued" title="Discontinued" />
            </Grid>
        );

        return (
            <div>
                {grid}
                <GridPDFExport
                    ref={pdfExport => this.gridPDFExport = pdfExport}
                >
                    {grid}
                </GridPDFExport>
            </div>
        );
    }

    pageChange = (event) => {
        this.setState(this.createState(event.page.skip, event.page.take));
    }

    createState(skip, take) {
        return {
            data: sampleProducts.slice(skip, skip + take),
            skip: skip
        };
    }

    exportPDF = () => {
        this.gridPDFExport.save(this.state.data, this.pdfExportDone);

        this.setState({ exporting: true });
    }

    pdfExportDone = () => {
        this.setState({ exporting: false });
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

PDF Export Options