All Components

PDF Output Overview

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

  • To export content in PDF, you can either use the capabilities of the Drawing library or the streamlined PDF Export 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 Export.

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 = <PDFOptions>{ paperSize: "A5", landscape: true };
  exportPDF(group, options).then((data) => {
      saveAs(data, "scene.pdf");
  });
}

import { Component } from '@angular/core';
import { exportScene } from './export-scene';

@Component({
  selector: 'my-app',
  template: `
      <button (click)="onClick()">Export PDF...</button>
  `
})
export class AppComponent {
  public onClick() {
    exportScene();
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Functionality and Features

In this article