PDF Processing Overview

The PDF Processing package enables you to export page content in PDF.

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.

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 {

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

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

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

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

    <App />,


  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');


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

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

Functionality and Features

Refer to the Drawing library documentation for more information on: