New to Kendo UI for jQuery? Start a free 30-day trial

DrawDOM

methods

Converts the given DOM element to a Drawing API scene.

The operation is asynchronous and returns a promise.

The promise will be resolved with the root Group of the scene.

drawDOM

Parameters:elementjQuery

The root DOM element to draw.

optionsObject

Configuration options

options.forcePageBreakString

A flag indicating whether to produce clickable hyperlinks in the exported PDF file.

It's also possible to pass a CSS selector as argument. All matching links will be ignored.

options.marginString|Object

An optional CSS selector that specifies the elements that should cause page breaks.

See Multi-page PDF output.

options.templateString

The paper size for automatic page breaking. The default "auto" means paper size is determined by content.

Supported values:

A predefined size: "A4", "A3" etc
An array of two numbers specifying the width and height in points (1pt = 1/72in)
An array of two strings specifying the width and height in units. Supported units are "mm", "cm", "in" and "pt".

Returns:Promise

A promise that will be resolved with the root Group of the scene.

<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar();

    var draw = kendo.drawing;

    draw.drawDOM($("#calendar"))
    .then(function(root) {
        // Chaining the promise via then
        return draw.exportImage(root);
    })
    .done(function(data) {
        // Here 'data' is the Base64-encoded image file
        kendo.saveAs({
            dataURI: data,
            fileName: "calendar.png"
        });
    });
</script>

<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar();

    var draw = kendo.drawing;

    draw.drawDOM($("#calendar"))
    .then(function(root) {
        // Chaining the promise via then
        return draw.exportPDF(root, {
            paperSize: "A4",
            landscape: true
        });
    })
    .done(function(data) {
        // Here 'data' is the Base64-encoded PDF file
        kendo.saveAs({
            dataURI: data,
            fileName: "calendar.pdf"
        });
    });
</script>

<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar();

    var draw = kendo.drawing;

    draw.drawDOM($("#calendar"))
    .then(function(root) {
        // Chaining the promise via then
        return draw.exportPDF(root, {
            paperSize: "A4",
            landscape: true
        });
    })
    .done(function(dataURI) {
        //Extracting the base64-encoded string and the contentType
        var data = {};
        var parts = dataURI.split(";base64,");
        data.contentType = parts[0].replace("data:", "");
        data.base64 = parts[1];

        //Sending the data via jQuery.post method
        //jQuery.post("url/to/save/pdf", data)
    });
</script>

<div id="calendar"></div>
<script>
    $("#calendar").kendoCalendar();

    var draw = kendo.drawing;

    draw.drawDOM($("#calendar"))
    .done(function(root) {
        // Here the PDF file is saved directly
        // without creating an intermediate
        // Base64-encoded version of its content
        draw.pdf.saveAs(root, "calendar.pdf");
    });
</script>