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.
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.
scss.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:
-
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 thevisibility: hidden
option is not supported. -
Apply the
drawDOM
method. The method takes a DOM element and options as parameters, and returns a promise which resolves to aGroup
object. -
Render the element into an SVG, PDF, or HTML5
<canvas>
format by utilizing one of the supported back-ends.
Functionality and Features
- Rendering repeated table headers
- Rendering multi-page content
- Rendering dimensions and CSS units
- Customizing the appearance