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

Exporting to PDF, Image, or SVG

The Kendo UI for Angular Diagram supports exporting to PDF, image, or SVG through the Drawing API.

The following example demonstrates how to export the Diagram component to PDF, image, or SVG formats using the Drawing API.

Change Theme

Theme

Loading ...

To export the Kendo UI for Angular Diagram component to PDF, image, or SVG, you can use the Drawing API to render the Diagram component as a drawing Group. The following steps outline how to achieve this:

Access the native HTML element of the Diagram component by using a template reference variable in your template:

html

<kendo-diagram #diagram></kendo-diagram>
<button kendoButton (click)="exportToPDF(diagram)">Export Diagram to PDF</button>

Use the Drawing API's drawDOM function to render the element as a drawing Group. For PDF export, you can also provide PDFOptions such as paperSize and margin:

public exportToPDF(diagram: DiagramComponent): void {
  // Access the native HTML element of the Diagram component
  const diagramElement: HTMLElement = diagram['wrapperElement'].nativeElement;

  // Render the element as a drawing Group using drawDOM
  drawDOM(diagramElement, {
    paperSize: 'A4',
    margin: '2cm' as PageMargin,
  })
    // Export the Group to PDF
    .then((group: Group) => exportPDF(group))
    // Save the exported PDF file
    .then((dataUri) => saveAs(dataUri, 'diagram.pdf'));
}

Export the drawing Group to your preferred format by passing it to exportPDF, exportImage, or exportSVG, and then save the exported file using saveAs with your desired file name and extension.

That's it! You can now export the Kendo UI for Angular Diagram component to PDF, image, or SVG using the Drawing API.

Exporting to PDF, Image, or SVG

See Also