How to export node details into Excel file in Blazor Diagram?

In a Blazor Diagram, the node details can be exported into an Excel file using the Excel Engine and Worksheet. This involves creating a DataTable with column details such as node ID, fill color, and content. The details are then added to an Excel document. The following example demonstrates how to export node details to an Excel sheet.

Code snippet:

/// <summary>
/// Exports the diagram node details to an Excel sheet.
/// </summary>
protected async void ExportToExcel()
{
   MemoryStream excelStream = CreateDocumentFromNodes(diagram.Nodes);
   await JS.SaveAs("ExportedDiagramDetails.xlsx", excelStream.ToArray());
}

/// <summary>
/// Creates an Excel document from the diagram nodes.
/// </summary>
/// <param name="nodes">The collection of nodes to be exported.</param>
/// <returns>A memory stream containing the Excel document.</returns>
public MemoryStream CreateDocumentFromNodes(DiagramObjectCollection<Node> nodes)
{
   // Create an instance of ExcelEngine
   using (ExcelEngine excelEngine = new ExcelEngine())
   {
       IApplication application = excelEngine.Excel;
       application.DefaultVersion = ExcelVersion.Xlsx;
       IWorkbook workbook = application.Workbooks.Create(1);
       IWorksheet worksheet = workbook.Worksheets[0];
       
       // Set the header row style
       worksheet.Range["A1"].CellStyle.Font.Bold = true;
       worksheet.Range["B1"].CellStyle.Font.Bold = true;
       worksheet.Range["C1"].CellStyle.Font.Bold = true;

       // Import data from DataTable
       DataTable table = CreateDataTableFromNodes(nodes);
       worksheet.ImportDataTable(table, true, 1, 1);

       // Save the created Excel document to MemoryStream
       using (MemoryStream stream = new MemoryStream())
       {
           workbook.SaveAs(stream);
           return stream;
       }
   }
}

/// <summary>
/// Creates a DataTable from the diagram nodes.
/// </summary>
/// <param name="nodes">The collection of nodes to be converted into a DataTable.</param>
/// <returns>A DataTable containing node details.</returns>
private static DataTable CreateDataTableFromNodes(DiagramObjectCollection<Node> nodes)
{
   // Create a DataTable with three columns
   DataTable table = new DataTable();
   table.Columns.Add("Element ID", typeof(string));
   table.Columns.Add("FillColor", typeof(string));
   table.Columns.Add("Content", typeof(string));

   // Populate DataTable with node details
   foreach(Node node in nodes)
   {
       table.Rows.Add(node.ID, node.Style.Fill, (node.Data as HierarchicalDetails).Manager);
   }

   return table;
}

JavaScript Method:

/// <summary>
/// Saves the provided file data as a downloadable file.
/// </summary>
/// <param name="filename">The name of the file to be saved.</param>
/// <param name="bytesBase64">The base64 encoded file data.</param>
function saveAsFile(filename, bytesBase64) {
   if (navigator.msSaveBlob) {
       // Download document in Edge browser
       var data = window.atob(bytesBase64);
       var bytes = new Uint8Array(data.length);
       for (var i = 0; i < data.length; i++) {
           bytes[i] = data.charCodeAt(i);
       }
       var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
       navigator.msSaveBlob(blob, filename);
   } else {
       var link = document.createElement('a');
       link.download = filename;
       link.href = "data:application/octet-stream;base64," + bytesBase64;
       document.body.appendChild(link); // Needed for Firefox
       link.click();
       document.body.removeChild(link);
   }
} 

For more details on Excel-related functionalities, refer to the Excel Library Overview

You can download the complete working sample from here.

Conclusion:

We hope you enjoyed learning about how to export node details into an Excel file in Blazor Diagram.

You can refer to our Blazor Diagram feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Diagram example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to evaluate our Blazor Diagram and other Blazor components.

If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!