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 Diagram's built-in exportVisual method and the Drawing API.

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

Change Theme

Theme

Loading ...

To export the Kendo UI for Angular Diagram component to PDF, image, or SVG, you can use the Diagram's built-in exportVisual method along with the Drawing API. The following steps outline how to achieve this:

Access 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 Diagram's exportVisual method to get the visual representation of the diagram as a drawing element:

public exportToPDF(diagram: DiagramComponent): void {
  // Get the visual representation of the diagram
  const diagramVisual = diagram.exportVisual();

  // Export the visual to PDF
  exportPDF(diagramVisual).then((result) => {
    saveAs(result, 'diagram.pdf');
  }).catch((error) => {
    console.error('Error exporting PDF:', error);
  });
}

Export the visual 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 exportVisual method.

Exporting to PDF, Image, or SVG

See Also