All Components

Drawing DOM Elements Overview

The Drawing library enables you to convert a part of or a whole existing page to drawing primitives.

Once the content is converted, you can further process or render it on screen, or export it in the Portable Document Format (PDF), Scalable Vector Graphics (SVG), or Portable Network Graphics (PNG) formats.

For more information on how to export and handle content in PDF with the Drawing library, refer to its PDF output documentation.

Getting Started

The Drawing component requires you to include auxiliary styles by either:

  • Loading any of the available Kendo UI themes, or
  • Adding CSS rules to your project.

    .kendo-pdf-hide-pseudo-elements:before, .kendo-pdf-hide-pseudo-elements:after {
    display: none !important;
    .k-pdf-export sub, .k-pdf-export sup {
    display: inline-block;

To convert a DOM element into a Group of drawing elements:

  1. Append the DOM element to the document and make sure that it is visible.

    The drawing of DOM elements which feature the display: none or the visibility: hidden option is not supported.

  2. Apply the drawDOM method. The method takes a DOM element and options as parameters, and returns a promise which resolves to a Group object.

  3. Render the element into an SVG, PDF, or HTML5 <canvas> format by utilizing one of the supported back-ends.
import { Component } from '@angular/core';
import { exportElement } from './export-element';

  selector: 'my-app',
  template: `
    <button (click)="onClick(drawMe)">Export PDF...</button>
    <div #drawMe>
        ... more HTML code here...
export class AppComponent {
  public onClick(element) {

import { drawDOM, exportPDF, DrawOptions, Group } from '@progress/kendo-drawing';
import { saveAs } from '@progress/kendo-file-saver';

export function exportElement(element: HTMLElement, options?: DrawOptions) {
    drawDOM(element, options).then((group: Group) => {
        return exportPDF(group);
    }).then((dataUri) => {
        saveAs(dataUri, 'export.pdf');

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

  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';


Functionality and Features

In this article