All Components

Exporting Drawings to PDF

The Kendo Drawing API can export your drawing to a PDF file.

PDF files cannot be displayed by a browser inside an HTML element and, as a result, you cannot create a Surface object for this kind of output. Therefore, you need to use the exportPDF function to generate the data URI instead.

The following example demonstrates how to export your drawing in PDF.

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

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 { enableProdMode, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

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

export class AppModule { }

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

Configuration

The Drawing API enables you to configure:

PDF Options

Currently, the following options are supported:

  • paperSize—This option can be either a paper name, such as A4; an array of two numbers, such as paper width and height; or "auto". By default, the option is set to "auto". This means that the paper size is just enough to accommodate the drawing. The available paper sizes are A0-A10, B0-B10, C0-C10, Executive, Folio, Legal, Letter, Tabloid. If you specify numbers, the numbers are assumed to be in a typographic points unit. A point is 1/72 of an inch. You can also use strings of the 297mm form. The supported units are mm, cm, in, and pt.
  • margin—This option indicates the paper margins. It has to be an object that contains the top, left, right, and bottom numbers which specify the paper margins. If you specify numbers, the numbers are assumed to be in points. By using strings, you can specify units. When paperSize is set to "auto", the dimensions are adjusted to include the margin.
  • landscape (Boolean value, defaults to false)—If set to true, the paper dimensions are rotated when needed to ensure that the width corresponds to the longer side of the output file.
  • title, author, subject, keywords, creator—These are the optional strings that are to be included in the PDF information dictionary.
  • multiPage (Boolean value, defaults to false)—If set to true, enables the support for multiple page output.
  • date—This object specifies the creation date of the document. The default value is the current date/time (new Date()).

Multi-Page PDF Output

To render a multiple pages PDF file, set multiPage: true to the Group object that you pass to exportPDF (master group). This group is then expected to contain only Group shapes in turn—one shape for each page (page groups). The PDF options that you pass to the master group apply to each page group unless the page group overrides them.

You can override the following options:

  • paperSize
  • margin
  • landscape

If paperSize that is located on the master group is set to "auto" and the page groups do not override it, then the paper size for each individual page is determined by its corresponding group. This means that the final document might have pages of different sizes.

Custom Fonts

The Drawing API allows you to specify custom fonts through the font option of the Text elements.

import { Point } from '@progress/kendo-drawing/geometry';
import { Text } from '@progress/kendo-drawing';

const text = new Text("Hello World", new geo.Point(100, 100));
text.options.set("font", "30px Verdana");

To correctly render the fonts in PDF, provide your code with access to the TTF files. Ideally, the files contain the same fonts that the browser uses to render content on-screen. However, you cannot access the fonts through the client-side JavaScript on the machine where the browser runs. That is why you have to provide them on the server and declare the paths to them.

To define the fonts, you can either:

The following example demonstrates how to apply the @font-face declarations.

@font-face {
  font-family: "DejaVu Sans";
  src: url("fonts/DejaVu/DejaVuSans.ttf") format("truetype");
}

The following example demonstrates how to apply the defineFont method.

import { defineFont } from '@progress/kendo-drawing/pdf';

defineFont({
    "Verdana"             : "/fonts/Verdana.ttf", // this is a URL
    "Verdana|Bold"        : "/fonts/Verdana_Bold.ttf",
    "Verdana|Bold|Italic" : "/fonts/Verdana_Bold_Italic.ttf",
    "Verdana|Italic"      : "/fonts/Verdana_Italic.ttf"
});

You have to run this code before a PDF is requested. The object you pass to defineFont has to map the font name or style to a URL with the TrueType file. The same-origin policy applies, so you cannot specify URLs to different hosts.

Fonts are loaded on demand. This means that you can declare more fonts than you need without worrying that any data will be needlessly downloaded or parsed. On the other hand, the fonts will be cached, so if you are building a Single-Page Application (SPA), the overhead will occur only once.

Currently, only TTF fonts having a Unicode mapping are supported. If you do not declare any fonts, the Kendo UI PDF generator will fall back to the standard PDF fonts that are listed below.

"serif"                  : "Times-Roman",
"serif|bold"             : "Times-Bold",
"serif|italic"           : "Times-Italic",
"serif|bold|italic"      : "Times-BoldItalic",
"sans-serif"             : "Helvetica",
"sans-serif|bold"        : "Helvetica-Bold",
"sans-serif|italic"      : "Helvetica-Oblique",
"sans-serif|bold|italic" : "Helvetica-BoldOblique",
"monospace"              : "Courier",
"monospace|bold"         : "Courier-Bold",
"monospace|italic"       : "Courier-Oblique",
"monospace|bold|italic"  : "Courier-BoldOblique"

The right-side font names above are reserved and cannot be used as URLs to TrueType fonts with defineFont. Non-ASCII characters are not supported by the standard PDF fonts.

  • The PDF generator supports only TrueType fonts with Unicode mappings.
  • To ensure that the automatic font discovery works properly, make sure that your CSS reside on the same domain as the web page.

Unicode Characters

Unicode is supported only if the fonts you provide contain glyphs for the referenced characters. Otherwise, depending on the specifics of each font, the font will render a default glyph—normally, a blank rectangle.

Currently, the Kendo UI suite does not support the substitution of glyphs between fonts. If the text contains glyphs which are not available in the current font, but might be available in another font that was declared, the font will still use the default glyph.

Supported Browsers

The Kendo UI PDF generator is tested and supported in the following desktop browsers:

  • Internet Explorer 9 and later.
  • Latest Chrome, Firefox, Safari, and Blink-based Opera versions.

Officially, the PDF export is not supported on mobile devices because of browser limitations and CORS-related security restrictions in hybrid applications. For example, it is not possible to load locally stored font files in hybrid applications. Though in specific scenarios PDF export might work on some mobile devices, it is not supported in:

  • Mobile browsers.
  • Hybrid mobile applications.
In this article