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

  • Adjusting the column widths to fill the page.
  • Adapting the number of rows for each page and places page breaks where appropriate.
  • Omitting the toolbar and pager.
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 CustomCell extends React.Component {
    render() {
        return (
            <td>
                <input disabled type="checkbox" checked={this.props.dataItem[this.props.field]} />
            </td>
        );
    }
}

class App extends React.Component {
    gridPDFExport;

    constructor(props) {
        super(props);

        this.state = { pdfExportRequested: false };
    }

    render() {
        const grid = (
            <Grid data={sampleProducts} style={{ height: '490px' }} >
                <GridToolbar>
                    <button
                        title="Export PDF"
                        className="k-button k-primary"
                        onClick={this.exportPDF}
                        disabled={this.state.pdfExportRequested}
                    >
                        Export PDF
                    </button>
                </GridToolbar>
                <Column field="ProductID" title="ID" width="40px" />
                <Column field="ProductName" title="Name" width="250px" />
                <Column field="Category.CategoryName" title="Category" width="100px" />
                <Column field="UnitPrice" title="Price" width="80px" />
                <Column field="QuantityPerUnit" title="Quantity Per Unit" width="180px" />
                <Column field="UnitsInStock" title="In stock" width="80px" />
                <Column field="Discontinued" title="Discontinued" width="140px" cell={CustomCell} />
            </Grid>
        );

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

    exportPDF = () => {
        this.raisePDFExportRequestedFlag();
        this.gridPDFExport.save(undefined, this.lowerPDFExportRequestedFlag);
    }

    raisePDFExportRequestedFlag = () => {
        this.setState({ pdfExportRequested: true });
    }

    lowerPDFExportRequestedFlag = () => {
        this.setState({ pdfExportRequested: false });
    }
}

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

In this article

 /