PDF Output Overview

The Drawing library provides configuration options for handling and exporting content in PDF.

  • To export content to PDF, you can either use the capabilities of the Drawing library or the streamlined PDF Processing component solution.
  • While the Drawing library provides a low-level API that is flexible, it is also harder to use as compared to the simple configuration options of Kendo UI PDF Processing.

Getting Stared

The following example demonstrates how to apply the exportPDF function and generate a Base 64-encoded PDF file from a drawing.

import { Path, Text, Group, pdf } from '@progress/kendo-drawing';
import { saveAs } from '@progress/kendo-file-saver';

const { exportPDF, PDFOptions } = pdf;

export function exportScene() {
  // Create a path and draw a straight line
    const path = new Path({
        stroke: {
            color: `#9999b6`,
            width: 2
        }
    });

    path.moveTo(0, 50).lineTo(200, 50).close();

  // Create the text
    const text = new Text(`Hello World!`, [ 20, 25 ], {
        font: `bold 15px Arial`
    });

  // Place all the shapes in a group
    const group = new Group();
    group.append(path, text);

    const options = { paperSize: "A5", landscape: true };
    exportPDF(group, options).then((data) => {
        saveAs(data, "scene.pdf");
    });
}

import React from 'react';
import ReactDOM from 'react-dom';
import { exportScene } from './export-scene';

class App extends React.Component {
    _element = null;
    handleSelect = () => {
        exportScene();
    }
    render() {
        return (
            <div>
                <button onClick={this.handleSelect}>Export PDF...</button>
            </div>
        );
    }
}

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

Functionality and Features

In this article