Fitting Content to Paper Size

The GridPDFExport component enables you to scale the content of the KendoReact Data Grid when you export it to PDF.

By default, the paper size of the exported document is determined by the size of the Grid on the screen. However, you can define a specific paper size that will apply to the whole document. As a result, the content is scaled to fit the specified paper size. It is possible to override the automatic scale factor—for example, to make room for additional page elements.

The following example demonstrates how the Grid fits its content to the available paper size.

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;
    state = { exporting: false };

    render() {
        const grid = (
            <Grid data={sampleProducts} style={{ height: '445px' }}>
                <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="40px" />
                <Column field="ProductName" title="Name" width="300px" />
                <Column field="Category.CategoryName" title="Category" width="150px" />
                <Column field="UnitPrice" title="Price" width="120px" />
                <Column field="QuantityPerUnit" title="Quantity Per Unit" width="180px" />
                <Column field="UnitsInStock" title="In stock" width="120px" />
                <Column field="Discontinued" title="Discontinued" width="130px" />
            </Grid>
        );

        return (
            <div>
                {grid}
                <GridPDFExport
                    paperSize="A4"
                    scale={0.5}
                    ref={pdfExport => this.gridPDFExport = pdfExport} >
                    {grid}
                </GridPDFExport>
            </div>
        );
    }

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

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

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

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