KendoReact PDF Generator Overview

The KendoReact PDF Generator enables you to export the specific or the entire content of the page to a PDF file. The components allow to customize the paper size, scaling the content to better fit on the page, change the landscape, specify a page template and many others features that provide extensive control over the exported PDF.

The KendoReact PDF Processing is built on React from the ground up, with zero dependencies, by a company with 10+ years of experience in making enterprise-ready components and UI widgets. This results in a React PDF Processing that delivers lighting fast performance and is highly customizable.

The PDF Processing feature is part of KendoReact, a professionally built commercial UI library. To try out this feature you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

React PDF Generator Demo

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 {
    Chart,
    ChartLegend,
    ChartSeries,
    ChartSeriesItem,
    ChartSeriesLabels,
    ChartCategoryAxis,
    ChartCategoryAxisItem
} from "@progress/kendo-react-charts";

import products from "./products.json";
import data from "./power-distribution-data.json";

const labelContent = e => e.category;

const categories = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"];
const firstSeries = [123, 276, 310, 212, 240, 156, 98];
const secondSeries = [165, 210, 287, 144, 190, 167, 212];
const thirdSeries = [56, 140, 195, 46, 123, 78, 95];

class App extends React.Component {
    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>
                <div className="border rounded p-2">
                    <PDFExport
                        ref={component => (this.pdfExportComponent = component)}
                        paperSize="auto"
                        margin={40}
                        fileName={`Report for ${new Date().getFullYear()}`}
                        author="KendoReact Team"
                    >
                        <div ref={container => (this.container = container)}>
                            <h3 className="text-center">Monthly report</h3>
                            <hr className="k-hr" />
                            <Grid
                                style={{ maxHeight: "400px" }}
                                data={products.slice(0, 5)}
                            >
                                <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>
                            <div className="row">
                                <div className="col-6">
                                    <Chart>
                                        <ChartSeries>
                                            <ChartSeriesItem
                                                type="donut"
                                                data={data}
                                                categoryField="kind"
                                                field="share"
                                            >
                                                <ChartSeriesLabels
                                                    color="#fff"
                                                    background="none"
                                                    content={labelContent}
                                                />
                                            </ChartSeriesItem>
                                        </ChartSeries>
                                        <ChartLegend visible={false} />
                                    </Chart>
                                </div>
                                <div className="col-6">
                                    <Chart>
                                        <ChartCategoryAxis>
                                            <ChartCategoryAxisItem categories={categories} />
                                        </ChartCategoryAxis>
                                        <ChartSeries>
                                            <ChartSeriesItem type="area" data={firstSeries} />
                                            <ChartSeriesItem type="area" data={secondSeries} />
                                            <ChartSeriesItem type="area" data={thirdSeries} />
                                        </ChartSeries>
                                    </Chart>
                                </div>
                            </div>
                        </div>
                    </PDFExport>
                </div>
            </div>
        );
    }

    exportPDFWithMethod = () => {
        savePDF(ReactDOM.findDOMNode(this.container), {
            paperSize: "auto",
            margin: 40,
            fileName: `Report for ${new Date().getFullYear()}`
        });
    };
    exportPDFWithComponent = () => {
        this.pdfExportComponent.save();
    };
}

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

This demo implements some of the features that are available in the React PDF generator.

  • You can export the content of the PDFExport component or export a specific DOM element.
  • Export of multiple components including a KendoReact Data Grid and two KendoReact Charts.
  • Adjust the export PDF based on the content using the automatic paper size option.
  • Set custom margins to the export file.
  • Generate a dynamic file name based on the current date.
  • Set the author (metadata) to reflect you or your organization.

React PDF Generator Features

Among the many features, which the KendoReact PDF Export delivers are:

  • Image resolution— You can limit the images resolution to improve the performance as by default they will be exported in their original resolution.
  • Hyperlinks—You can choose if the hyperlinks should be clickable or not in the exported PDF file.
  • Scaling of content—The KendoReact PDF Renderer enables you to export a PDF document that is bigger or smaller than its original elements in order to fit a large document on a single page.
  • Configuration of margins—The PDF Processing package delivers options for setting the margins of the output PDF files which provides a better control over the export document layout.
  • Repeated table headers—The PDF Processing component enables you to render recurrent table headers.
  • Multi-page content—If you have larger reports the KendoReact PDF Renderer component provides options for generating multi-page content in PDF, preventing the page-split, and rendering page templates.
  • Hidden content—If you need to have a content only in the exported PDF, you can generate content in PDF which is otherwise not visible to the user during the PDF export itself.
  • Base64 Strings—When the document has to be exported on the server, the React PDF Generator enables you to create base64 string during the PDF export and send it to the server.
  • Styling of content—You can change the appearance of the content with CSS rules that apply only to the PDF file, which allows styling the generated PDF without changing the web page appearance.
  • Theme support—The KendoReact PDF Processing, as well as all 70+ components in the KendoReact suite, are styled in three polished themes (Bootstrap, Material, and Default) and can be further customized to match your specific design guidelines.

Support Options

For any issues you might encounter while working with the KendoReact PDF Generator, use any of the available support channels:

  • KendoReact license holders and active trialists can take advantage of our outstanding customer support delivered by the developers building the library. To submit a support ticket, use the KendoReact dedicated support system.
  • KendoReact forums are part of the free support you can get from the community and from the KendoReact team on all kinds of general issues.
  • KendoReact feedback portal and KendoReact roadmap provide information on the features in discussion and also the planned ones for release.
  • KendoReact uses GitHub Issues as its bug tracker and you can submit any related reports there. Also, check out the closed list.
  • You may still need a tailor-made solution for your project. In such cases, go straight to Progress Services.