drawDOM

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.

Parameters

element jQueryThe root DOM element to draw.

options ObjectConfiguration options

options.avoidLinks Boolean|String (default: false)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.forcePageBreak StringAn optional CSS selector that specifies the elements that should cause page breaks.

See Multi-page PDF output.

options.paperSize String (default: "auto")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".

options.margin String|ObjectSpecifies the margins of the page (numbers or strings with units). Supported

units are "mm", "cm", "in" and "pt" (default).

options. margin.bottom Number|String (default: 0)The bottom margin. Numbers are considered as "pt" units.

options. margin.left Number|String (default: 0)The left margin. Numbers are considered as "pt" units.

options. margin.right Number|String (default: 0)The right margin. Numbers are considered as "pt" units.

options. margin.top Number|String (default: 0)The top margin. Numbers are considered as "pt" units.

options.template StringThe page template for multi-page output.

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

Example - Exporting a DOM element to an image

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

Example - Exporting a DOM element to a PDF file (via Base64-encoded string)

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

Example - Exporting a DOM element to a PDF Base64-encoded string and send it to the server via jQuery.post()

<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) {
        //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>

Example - Exporting a DOM element to a PDF file (direct)

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