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

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

Functionality and Features

Refer to the Drawing library documentation for more information on:

 /