Exporting PDF with Kendo UI React

The KendoReact Rich Text PDF Generator is a component enabling the export of a selection of all web page content into a PDF file. It allows you to scale the content for a better fit on the page, customize the paper size, modify page orientation, work with templates, and utilize many other features offering extensive control over the exported PDF file.

Built from scratch and specifically for React, the KendoReact PDF Generator offers high-performance control, integrating flawlessly with your application and the remaining KendoReact components. Key features include image resolution, clickable hyperlinks, content scaling, margin setting, repeated table headers, multi-page content, hidden content, and Base64 strings.

Here's a sample of using React to Export PDF.

import React from 'react';
import { PDFExport } from '@progress/kendo-react-pdf';

class App extends React.Component {
  pdfExportComponent;

  render() {
    return (
      <div>
        <button onClick={this.exportPDFWithComponent}>Export PDF</button>
        <PDFExport
          ref={(component) => this.pdfExportComponent = component}
          paperSize="A4"
          fileName="output.pdf"
          title="PDF Export Example"
          subject="An example of PDF export using KendoReact PDF Processing"
          keywords="HTML, CSS, JavaScript, React, KendoReact"
          author="Your Name"
        >
          <div>
            <h1>Hello, KendoReact!</h1>
            <p>This is an example of PDF export with Kendo UI React.</p>
          </div>
        </PDFExport>
      </div>
    );
  }

  exportPDFWithComponent = () => {
    this.pdfExportComponent.save();
  }
}

export default App;

In this example, we've referenced a PDFExport component (this.pdfExportComponent). When you click the "Export PDF" button, the exportPDFWithComponent function is called, which saves the current content of the PDFExport component to a PDF file.

The exported material is contained within the PDFExport component. In this case, it's a simple div with a heading and a paragraph. 

It is a simple example. Depending on your demands, you may need to change or extend this to meet them. You can further modify the output using the PDFExport component's numerous options, such as adding photos, tables, links, etc.

Conclusion

The KendoReact Rich Text PDF Generator is a component that allows exporting a selection of all web page content into a PDF file. It provides various functionalities to customize the format, size, orientation, and content of the PDF file. It is explicitly built for React and integrates seamlessly with other KendoReact components. In this post, we showed a simple example of using React to export PDF with the PDFExport component, which saves the content into a PDF file. You can further modify the output using the various options of the PDFExport component, such as adding images, tables, links, etc.