Getting Started with KendoReact PDF Processing

The KendoReact PDF Processing enables you to export single- and multi-page content in PDF and provides options such as embedding images, exporting hidden content, setting the margins of the document and styling the output.

To export pages and page sections to PDF files, use either:

To export content to PDF with the PDFExport component:

  1. Place the content inside it.
  2. Call the save method of the component to save the generated file.

To export content to PDF with the savePDF method:

  1. Call the method.
  2. Pass the content as its argument.

The KendoReact PDF Processing feature is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-pdf package.

Basic Usage

The following example demonstrates the PDF Processing export components in action.

import React from 'react';
import 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';

class App extends React.Component {
    pdfExportComponent;
    grid;

    constructor(props) {
        super(props);
        this.state = {
            gridData: products
        };
    }

    render() {
        return (
            <div>
                <div className="example-config">
                    <button className="k-button" onClick={this.exportPDFWithComponent}>Export with component</button>
                    &nbsp;
                    <button className="k-button" onClick={this.exportPDFWithMethod}>Export with method</button>
                </div>

                <PDFExport ref={(component) => this.pdfExportComponent = component} paperSize="A4">
                    <Grid
                        ref={(grid) => this.grid = grid}
                        style={{ maxHeight: '400px' }}
                        data={this.state.gridData}
                    >
                        <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>
        );
    }

    exportPDFWithMethod = () => {
        savePDF(ReactDOM.findDOMNode(this.grid), { paperSize: 'A4' });
    }
    exportPDFWithComponent = () => {
        this.pdfExportComponent.save();
    }
}

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

Functionality and Features

Refer to the Drawing library documentation for more information on:

Installation

  1. Download and install the package. Use Node.js v5.0.0 or later.

    npm install --save @progress/kendo-react-pdf @progress/kendo-drawing
  2. Once installed, import the package module.

    // ES2015 module syntax
    import { PDFExport, savePDF } from '@progress/kendo-react-pdf';
    // CommonJS format
    const { PDFExport, savePDF } = require('@progress/kendo-react-pdf');

Dependencies

The PDF package requires the following peer dependencies to be installed by your application:

  • react 16.8.2*
  • react-dom
  • @progress/kendo-drawing
 /