KendoReact PDF Generator Overview

The KendoReact PDF Generator enables you to export a selection of or the entire content of a web page to a PDF file. With it, you can scale the content to better fit on the page, customize the paper size, change the page orientation, work with templates and use many others features that provide extensive control over the exported PDF file.

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 React PDF Processing that delivers lightning 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 to PDF 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 for 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 image resolution to improve performance (the default is to export images in their original resolution).
  • Hyperlinks—You can choose if the hyperlinks should be clickable or not in the exported PDF file.
  • Content scaling—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.
  • Margin configuration—The PDF Processing functionality delivers options for setting the margins of the output PDF files, which provides better control over the layout of the exported document.
  • Repeated table headers—The PDF Processing component enables you to render recurrent table headers.
  • Multi-page content—For larger documents, the KendoReact PDF Renderer provides options for generating multi-page PDF files, preventing page-split, and rendering page templates.
  • Hidden content—If you need to display certain content only in the exported PDF, you can generate content, which is otherwise not visible to the user before the PDF file is exported.
  • 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.
  • Content styling—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 80+ 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 Telerik Services.