Drawing DOM Elements
The Drawing library can convert all or part of an existing page into drawing primitives with the drawDOM function and then export it to various formats such as PDF, PNG, or SVG.
This is particularly useful when you want to turn content that already exists in the browser—an invoice, a report, a dashboard, or a printable view—into a scene you can export, without re-creating that layout on the server.
import { drawDOM } from "@progress/kendo-drawing";
drawDOM(document.querySelector("#content"))
.then(group => {
// Export the group to PDF, PNG, or SVG
});Exporting the Scene
drawDOM walks the live DOM tree starting at the element you pass in and, for every node, reads its actual computed style—the same values the browser used to paint it—to build a matching shape.
Once you have a Group from drawDOM, you can export it using the available exporters. For example, to export to PDF:
import { drawDOM, exportPDF } from "@progress/kendo-drawing";
drawDOM(document.querySelector("#content"))
.then(group => exportPDF(group))
.then(dataUri => {
// Save, upload, or preview the generated PDF.
});You can similarly use exportImage or exportSVG to produce PNG or SVG output. For more information on the available exporters and their options, refer to the Exporting Drawings to PDF, Exporting Drawings to Images, and Exporting Drawings to SVG sections.
Extending the Created Scene
Because the returned Group behaves like any other scene, you can extend it with shapes created directly through the Drawing API before you export it—for example, to stamp a watermark, a signature, or a generated barcode onto a captured invoice.
import { drawDOM, Text, geometry } from '@progress/kendo-drawing';
const { Point } = geometry;
drawDOM(element).then((group) => {
const watermark = new Text('DRAFT', new Point(20, 20), {
font: 'bold 24px sans-serif',
fill: { color: '#ff0000', opacity: 0.4 }
});
group.append(watermark);
return group;
});For the full set of shapes you can combine this way, refer to Drawing Shapes.
Redrawing Dynamic Content
drawDOM captures a snapshot of the content at the moment it runs—it does not observe subsequent DOM mutations. If the underlying data or layout changes after the promise resolves (for example, a grid loads another page, or a chart animates), call drawDOM again to obtain a fresh Group.
When the redraw is tied to a frequent event, such as a keystroke or a window resize, debounce the calls. Walking a large DOM tree and waiting for image and font loading on every trigger can turn an otherwise fast operation into a visible slowdown.