Drawing DOM Elements
The Kendo UI Drawing library supports the conversion of an existing page, or part of it, to drawing primitives.
This approach allows you to further process the content and export it in various formats such as Portable Document Format (PDF), Scalable Vector Graphics (SVG), and Portable Network Graphics (PNG) ones.
The Drawing DOM Elements is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Getting Started
By using the drawing.drawDOM function you can draw a DOM element into a drawing.Group which you are then able to render with one of the supported backends into SVG, PDF, or HTML5 <canvas> format.
The DOM element must be appended to the document and fully rendered which means that you cannot draw an element that has the display: none or the visibility: hidden options.
The following example demonstrates a sample piece of HTML you may have on a page.
<div id="drawMe" class="...">
... more HTML code here...
</div>
The following example demonstrates how you can draw the HTML from the previous example from JavaScript. The drawing.drawDOM method takes a jQuery selector or object, or a plain DOM node, and returns a promise which delivers a drawing.Group object.
drawing.drawDOM("#drawMe").then(function(group){
// Here group is a drawing.Group object.
// You can now draw it to SVG, for example.
var svg = drawing.Surface.create($("#container"), { type: "svg" });
svg.draw(group);
// You can also save it as PDF.
// Optionally:
group.options.set("pdf", {...pdf options...});
drawing.pdf.saveAs(group, "filename.pdf", proxyUrl);
});