Excel export options in Blazor DataGrid
4 Dec 202524 minutes to read
The Syncfusion® Blazor DataGrid allows customization of Excel and CSV export functionality. This flexibility enables precise control over the exported content and layout to meet specific requirements.
The export behavior can be customized using the ExcelExportProperties property. This property supports various options, including:
- Exporting specific columns.
- Including or excluding hidden columns.
- Exporting with a custom data source.
- Enabling filters in the exported Excel or CSV document.
- Changing the file name.
- Adding headers and footers.
- Exporting multiple Grids.
- Customizing data using queries.
- Defining delimiters for CSV export.
- Applying themes.
Export current page records
Exporting the current page records from the Syncfusion® Blazor DataGrid enables generating Excel or CSV documents that reflect only the data currently visible in the Grid. This approach is suitable when the intent is to capture a snapshot of the paginated view rather than the entire dataset.
To configure this behavior, handle the OnToolbarClick event and invoke the ExportToExcelAsync method with the ExportType property set in the ExcelExportProperties object. The available options include:
- CurrentPage: Includes only the records shown on the active Grid page.
- AllPages: Includes all records across all pages.
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.DropDowns
<div style="display: flex; align-items: center; margin-bottom: 15px;font-weight: bold">
<label style="padding-right: 10px;">Change export type:</label>
<SfDropDownList TValue="string" TItem="DropDownOrder" @bind-Value="SelectedExportType" DataSource="@DropDownValue" Width="150px">
<DropDownListFieldSettings Text="Text" Value="Value" />
</SfDropDownList>
</div>
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowPaging="true" AllowExcelExport="true"
Toolbar="@(new List<string>() { "ExcelExport" })" Height="300">
<GridEvents TValue="EmployeeData" OnToolbarClick="ToolbarClickHandler"></GridEvents>
<GridPageSettings PageSizes="true" PageSize="8"></GridPageSettings>
<GridColumns>
<GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="Employee ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true" />
<GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="150" />
<GridColumn Field=@nameof(EmployeeData.LastName) HeaderText="Last Name" Width="150" />
<GridColumn Field=@nameof(EmployeeData.City) HeaderText="City" Width="150" />
</GridColumns>
</SfGrid>
@code {
private SfGrid<EmployeeData> Grid;
public List<EmployeeData> Orders { get; set; }
private string SelectedExportType = "CurrentPage";
List<DropDownOrder> DropDownValue = new List<DropDownOrder>
{
new DropDownOrder { Text = "CurrentPage", Value = "CurrentPage" },
new DropDownOrder { Text = "AllPages", Value = "AllPages" },
};
protected override void OnInitialized()
{
Orders = EmployeeData.GetAllRecords();
}
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.Id == "Grid_excelexport")
{
var exportProperties = new ExcelExportProperties
{
ExportType = SelectedExportType == "AllPages" ? ExportType.AllPages : ExportType.CurrentPage
};
await Grid.ExportToExcelAsync(exportProperties);
}
}
public class DropDownOrder
{
public string Text { get; set; }
public string Value { get; set; }
}
}public class EmployeeData
{
public static List<EmployeeData> Employees = new List<EmployeeData>();
public EmployeeData(int employeeID, string firstName, string lastName, string city)
{
this.EmployeeID = employeeID;
this.FirstName = firstName;
this.LastName = lastName;
this.City = city;
}
public static List<EmployeeData> GetAllRecords()
{
if (Employees.Count == 0)
{
Employees.Add(new EmployeeData(1001, "Nancy", "Davolio", "Seattle"));
Employees.Add(new EmployeeData(1002, "Andrew", "Fuller", "Tacoma"));
Employees.Add(new EmployeeData(1003, "Janet", "Leverling", "Kirkland"));
Employees.Add(new EmployeeData(1004, "Margaret", "Peacock", "Redmond"));
Employees.Add(new EmployeeData(1005, "Steven", "Buchanan", "London"));
Employees.Add(new EmployeeData(1006, "Michael", "Suyama", "London"));
Employees.Add(new EmployeeData(1007, "Robert", "King", "London"));
Employees.Add(new EmployeeData(1008, "Laura", "Callahan", "Seattle"));
Employees.Add(new EmployeeData(1009, "Anne", "Dodsworth", "London"));
}
return Employees;
}
public int EmployeeID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string City { get; set; }
}Export the selected records
Exporting selected records from the Syncfusion® Blazor DataGrid enables generating Excel or CSV documents that include only specific data. This approach supports focused exports based on selection.
To export selected records:
- Handle the OnToolbarClick event.
- Retrieve the selected records using GetSelectedRecordsAsync .
- Assign the selected data to ExportProperties.DataSource property.
- Invoke the ExportToExcelAsync or ExportToCsvAsync method.
@using Syncfusion.Blazor.Grids
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowPaging="true" AllowExcelExport="true" Toolbar="@(new List<string>() { "ExcelExport" })" Height="348">
<GridEvents OnToolbarClick="ToolbarClickHandler" TValue="OrderData"></GridEvents>
<GridSelectionSettings EnableSimpleMultiRowSelection="true" Type="SelectionType.Multiple"></GridSelectionSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true" />
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150" />
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120" />
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="150" />
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.Id == "Grid_excelexport")
{
var selectedRecords = await Grid.GetSelectedRecordsAsync();
ExcelExportProperties exportProperties = new ExcelExportProperties
{
DataSource = selectedRecords
};
await Grid.ExportToExcelAsync(exportProperties);
}
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData(int orderID, string customerID, double freight, string shipCity)
{
this.OrderID = orderID;
this.CustomerID = customerID;
this.Freight = freight;
this.ShipCity = shipCity;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count == 0)
{
Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims"));
Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster"));
Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro"));
Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon"));
Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi"));
Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro"));
Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern"));
Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève"));
Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende"));
Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal"));
Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz"));
Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F."));
Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln"));
Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro"));
Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque"));
}
return Orders;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double Freight { get; set; }
public string ShipCity { get; set; }
}Exporting grouped records
The Syncfusion® Blazor DataGrid supports exporting grouped records with outline formatting, allowing detailed rows to be collapsed for improved readability in the exported Excel document. This approach preserves the grouping structure and is suitable for sharing grouped data.
To enable grouped record export:
- Set AllowGrouping to true.
- Specify grouping columns using GroupSettings.Columns.
- Handle the OnToolbarClick event and invoke the ExportToExcelAsync or ExportToCsvAsync method.
@using Syncfusion.Blazor.Grids
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowPaging="true" AllowGrouping="true" AllowExcelExport="true" Toolbar="@(new List<string>() { "ExcelExport" })" Height="348">
<GridEvents OnToolbarClick="ToolbarClickHandler" TValue="OrderData"></GridEvents>
<GridGroupSettings Columns="@Initial"></GridGroupSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true" />
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150" />
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120" />
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="150" />
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> Orders { get; set; }
public string[] Initial = (new string[] { "CustomerID", "ShipCity" });
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.Id == "Grid_excelexport")
{
await Grid.ExportToExcelAsync();
}
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData(int orderID, string customerID, double freight, string shipCity)
{
this.OrderID = orderID;
this.CustomerID = customerID;
this.Freight = freight;
this.ShipCity = shipCity;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count == 0)
{
Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims"));
Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster"));
Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro"));
Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon"));
Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi"));
Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro"));
Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern"));
Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève"));
Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende"));
Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal"));
Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz"));
Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F."));
Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln"));
Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro"));
Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque"));
}
return Orders;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double Freight { get; set; }
public string ShipCity { get; set; }
}Limitations
Microsoft Excel supports a maximum of seven nested outline levels. The Syncfusion® Blazor DataGrid can export up to seven levels of grouped records with outline formatting. If the grouping exceeds this limit, the exported document will not include outline structures.
Refer to the Microsoft Excel limitations for more details.
Export with hidden columns
The Syncfusion® Blazor DataGrid supports exporting columns that are hidden in the UI but required in the exported Excel or CSV document. This approach helps include important data in the exported file without showing it in the Grid.
To include hidden columns in the export:
- Set ExcelExportProperties.includeHiddenColumn to true.
- Handle the OnToolbarClick event.
- Invoke the ExportToExcelAsync or ExportToCsvAsync method.
In this configuration, the ShipCity column is hidden in the Grid and included in the exported Excel file when ExcelExportProperties.IncludeHiddenColumn is enabled.
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px;">
<label style="font-weight: bold">Include or exclude hidden columns</label>
<SfSwitch @bind-Checked="IncludeHiddenColumns"></SfSwitch>
</div>
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowPaging="true" AllowExcelExport="true"
Toolbar="@(new List<string>() { "ExcelExport" })" Height="348">
<GridEvents OnToolbarClick="ToolbarClickHandler" TValue="OrderData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true" />
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150" />
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120" />
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="150" Visible="false" />
<GridColumn Field=@nameof(OrderData.ShipCountry) HeaderText="Ship Country" Width="150" />
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> Orders { get; set; }
public bool IncludeHiddenColumns { get; set; } = false;
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.Id == "Grid_excelexport")
{
ExcelExportProperties exportProperties = new ExcelExportProperties
{
IncludeHiddenColumn = IncludeHiddenColumns
};
await Grid.ExportToExcelAsync(exportProperties);
}
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData(int orderID, string customerID, double freight, string shipCity, string shipCountry)
{
this.OrderID = orderID;
this.CustomerID = customerID;
this.Freight = freight;
this.ShipCity = shipCity;
this.ShipCountry = shipCountry;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count == 0)
{
Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "France"));
Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Germany"));
Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Brazil"));
Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "France"));
Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Belgium"));
Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Brazil"));
Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Switzerland"));
Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Switzerland"));
Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Brazil"));
Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Venezuela"));
Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Austria"));
Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Mexico"));
Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Germany"));
Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Brazil"));
Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "USA"));
}
return Orders;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double Freight { get; set; }
public string ShipCity { get; set; }
public string ShipCountry { get; set; }
}Show or hide columns while exporting
The Syncfusion® Blazor DataGrid allows showing or hiding specific columns during export. This helps include only the required data in the Excel or CSV file.
To configure column visibility during export:
- Handle the OnToolbarClick event and update the column visibility using the Visible property.
- Export the Grid using the ExportToExcelAsync method.
- Handle the ExportComplete event to restore the original visibility.
In this configuration, the CustomerID column is shown only during export, and the ShipCity column is hidden.
@using Syncfusion.Blazor.Grids
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowExcelExport="true"
Toolbar="@(new List<string>() { "ExcelExport" })" Height="348">
<GridEvents OnToolbarClick="ToolbarClickHandler" ExportComplete="ExportCompleteHandler" TValue="OrderData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true" />
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Visible="@isCustomerIDVisible" Width="150" />
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120" />
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Visible="@isShipCityVisible" Width="150" />
<GridColumn Field=@nameof(OrderData.ShipCountry) HeaderText="Ship Country" Width="150" />
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> Orders { get; set; }
public bool isCustomerIDVisible { get; set; } = false;
public bool isShipCityVisible { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.Id == "Grid_excelexport")
{
isCustomerIDVisible = true;
isShipCityVisible=false;
await Grid.ExportToExcelAsync();
}
}
public void ExportCompleteHandler(object args)
{
isCustomerIDVisible = false;
isShipCityVisible=true;
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName, string shipCountry)
{
this.OrderID = orderID;
this.CustomerID = customerID;
this.Freight = freight;
this.ShipCity = shipCity;
this.ShipName = shipName;
this.ShipCountry = shipCountry;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count == 0)
{
Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier", "France"));
Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten", "Germany"));
Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes", "Brazil"));
Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock", "France"));
Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices", "Belgium"));
Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes", "Brazil"));
Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese", "Switzerland"));
Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt", "Switzerland"));
Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export", "Brazil"));
Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos", "Venezuela"));
Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel", "Austria"));
Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial", "Mexico"));
Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen", "Germany"));
Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia", "Brazil"));
Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery", "USA"));
}
return Orders;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double Freight { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
public string ShipCountry { get; set; }
}Define file name
The Syncfusion® Blazor DataGrid supports assigning a custom file name when exporting data to Excel or CSV formats. This capability helps generate descriptive file names, improving the organization and identification of exported documents.
To configure a custom file name, set the FileName property of the ExcelExportProperties class within the OnToolbarClick event. Use this configuration as a parameter in the ExportToExcelAsync or ExportToCsvAsync method to initiate the export process with the specified file name.
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Inputs
<div style="display: flex; align-items: center; padding: 0px 0 20px 0;">
<label style="margin-right: 17px; white-space: nowrap;font-weight:bold">Enter file name:</label>
<SfTextBox @bind-Value="FileName" Placeholder="Enter file name" Width="120px"></SfTextBox>
</div>
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowExcelExport="true" Toolbar="@(new List<string>() { "ExcelExport" })" Height="348">
<GridEvents OnToolbarClick="ToolbarClickHandler" TValue="OrderData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true" />
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150" />
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120" />
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="150" />
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="150" />
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> Orders { get; set; }
public string FileName { get; set; } = string.Empty;
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.Id == "Grid_excelexport")
{
var fileNameToExport = !string.IsNullOrWhiteSpace(FileName) ? FileName + ".xlsx" : "ExportedData.xlsx";
ExcelExportProperties exportProperties = new ExcelExportProperties
{
FileName = fileNameToExport,
};
await Grid.ExportToExcelAsync(exportProperties);
}
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName)
{
this.OrderID = orderID;
this.CustomerID = customerID;
this.Freight = freight;
this.ShipCity = shipCity;
this.ShipName = shipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count == 0)
{
Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier"));
Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export"));
Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos"));
Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel"));
Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial"));
Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen"));
Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia"));
Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery"));
}
return Orders;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double Freight { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Customizing columns on export
The Syncfusion® Blazor DataGrid allows customizing which columns appear in the exported Excel or CSV file. This helps adjust column headers, alignment, and formatting based on export requirements.
To customize columns during export:
- Handle the OnToolbarClick event.
- Create a list of GridColumn objects with the required Field, HeaderText, TextAlign, Format, and Width values.
- Assign the list to the ExcelExportProperties.Columns property and pass it to the ExportToExcelAsync or ExportToCsvAsync method to apply the column customizations during export.
In this configuration, the OrderID column is exported with the header text Order Number, the CustomerID column with Customer Name, and the Freight column is center-aligned. These customizations are applied only during export and do not affect the Grid display.
@using Syncfusion.Blazor.Grids
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowExcelExport="true" Toolbar="@(new List<string>() { "ExcelExport" })" Height="348">
<GridEvents OnToolbarClick="ToolbarClickHandler" TValue="OrderData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true" />
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150" />
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="150" />
<GridColumn Field=@nameof(OrderData.ShipCountry) HeaderText="Ship Country" Width="150" />
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.Id == "Grid_excelexport") //Id is combination of Grid's ID and itemname.
{
List<GridColumn> ExportColumns = new List<GridColumn>();
ExportColumns.Add(new GridColumn() { Field = "OrderID", HeaderText = "Order Number", Width = "120" });
ExportColumns.Add(new GridColumn() { Field = "CustomerID", HeaderText = "Customer Name", Width = "120" });
ExportColumns.Add(new GridColumn() { Field = "Freight", HeaderText = "Freight", Width = "120", Format = "C2", TextAlign = TextAlign.Center });
var exportProperties = new ExcelExportProperties
{
Columns = ExportColumns
};
await Grid.ExportToExcelAsync(exportProperties);
}
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData(int orderID, string customerID, double freight, string shipCity, string shipCountry)
{
this.OrderID = orderID;
this.CustomerID = customerID;
this.Freight = freight;
this.ShipCity = shipCity;
this.ShipCountry = shipCountry;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count == 0)
{
Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "France"));
Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Germany"));
Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Brazil"));
Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "France"));
Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Belgium"));
Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Brazil"));
Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Switzerland"));
Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Switzerland"));
Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Brazil"));
Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Venezuela"));
Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Austria"));
Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Mexico"));
Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Germany"));
Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Brazil"));
Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "USA"));
}
return Orders;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double Freight { get; set; }
public string ShipCity { get; set; }
public string ShipCountry { get; set; }
}By default, the exported Excel document uses the Material theme styling.
Font and color customization
The Syncfusion® Blazor DataGrid supports applying font and color styles to the exported Excel or CSV document. This helps maintain a consistent and readable appearance for exported data.
To apply styling:
- Define the Theme property in ExcelExportProperties.
- Set font styles for the Caption, Header, and Record sections using the ExcelStyle class.
- Pass the theme configuration to the ExportToExcelAsync or ExportToCsvAsync method in the OnToolbarClick event.
Theme Properties
-
Caption
Applies styling to the caption section in the exported document. The caption is typically a title or description shown at the top of the Excel or CSV sheet. -
Header
Applies styling to the column headers in the exported document. These headers match the column titles shown in the Grid. -
Record
Applies styling to the data rows in the exported document. These rows contain the actual values from the Grid.
@using Syncfusion.Blazor.Grids
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowExcelExport="true" Toolbar="@(new List<string>() { "ExcelExport" })" Height="348">
<GridEvents OnToolbarClick="ToolbarClickHandler" TValue="OrderData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true" />
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150" />
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120" />
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="150" />
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="150" />
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.Id == "Grid_excelexport")
{
ExcelExportProperties excelProperties = new ExcelExportProperties();
ExcelTheme Theme = new ExcelTheme();
ExcelStyle ThemeStyle = new ExcelStyle()
{
FontName = "Segoe UI",
FontColor = "#666666",
FontSize = 20
};
Theme.Header = ThemeStyle;
Theme.Record = ThemeStyle;
Theme.Caption = ThemeStyle;
excelProperties.Theme = Theme;
await Grid.ExportToExcelAsync(excelProperties);
}
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName)
{
this.OrderID = orderID;
this.CustomerID = customerID;
this.Freight = freight;
this.ShipCity = shipCity;
this.ShipName = shipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count == 0)
{
Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier"));
Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export"));
Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos"));
Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel"));
Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial"));
Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen"));
Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia"));
Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery"));
}
return Orders;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double Freight { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Customizing the background color for a Grid in an exported Excel or CSV document
The Syncfusion® Blazor DataGrid allows customizing the background color of Grid content—such as header, record, and caption rows—when exporting to Excel or CSV formats. This improves readability and enhances the visual appearance of exported files.
To apply background color:
-
Handle the OnToolbarClick event.
-
Create an instance of ExcelExportProperties.
-
Define an ExcelTheme and set a custom ExcelStyle with the BackColor property.
-
Assign the style to the following properties of the theme:
- Caption: Applies background color to the caption section at the top of the exported document.
- Header: Applies background color to the column headers.
- Record: Applies background color to the data rows.
-
Set the theme to the Theme property of
ExcelExportProperties. -
Invoke the ExportToExcelAsync or ExportToCsvAsync to export the Grid with the applied background color.
@using Syncfusion.Blazor.Grids
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowExcelExport="true" Toolbar="@(new List<string>() { "ExcelExport" })" Height="348">
<GridEvents OnToolbarClick="ToolbarClickHandler" TValue="OrderData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true" />
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150" />
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120" />
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="150" />
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="150" />
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> Orders { get; set; }
public string FileName { get; set; } = string.Empty;
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.Id == "Grid_excelexport")
{
ExcelExportProperties ExcelProperties = new ExcelExportProperties();
ExcelTheme Theme = new ExcelTheme();
ExcelStyle ThemeStyle = new ExcelStyle()
{
BackColor = "#C67878"
};
Theme.Header = ThemeStyle;
Theme.Record = ThemeStyle;
Theme.Caption = ThemeStyle;
ExcelProperties.Theme = Theme;
await Grid.ExportToExcelAsync(ExcelProperties);
}
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName)
{
this.OrderID = orderID;
this.CustomerID = customerID;
this.Freight = freight;
this.ShipCity = shipCity;
this.ShipName = shipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count == 0)
{
Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier"));
Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export"));
Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos"));
Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel"));
Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial"));
Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen"));
Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia"));
Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery"));
}
return Orders;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double Freight { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Add additional worksheets to Excel document while exporting
The Syncfusion® Blazor DataGrid allows adding additional worksheets to the exported Excel or CSV document. This is useful for including supplementary information, summaries, or additional datasets alongside the Grid content.
To add additional worksheets during export:
-
Create a new instance of the Workbook class and assign it to the Workbook property of ExcelExportProperties.
-
Use the Worksheets.Add method to append new worksheets to the workbook.
-
Set the GridSheetIndex property to 0 to specify the worksheet index where the Grid data should be placed.
-
Invoke the ExportToExcelAsync or ExportToCsvAsync to export the Grid with the additional worksheets.
Two extra blank worksheets are added along with the worksheet containing the Grid data in this configuration.
@using Syncfusion.Blazor.Grids
@using Syncfusion.ExcelExport
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowExcelExport="true" Toolbar="@(new List<string>() { "ExcelExport" })" Height="348">
<GridEvents OnToolbarClick="ToolbarClickHandler" TValue="OrderData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true" />
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150" />
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120" />
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="150" />
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="150" />
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.Id == "Grid_excelexport")
{
ExcelExportProperties ExportProperties = new ExcelExportProperties();
// Add a new workbook to the Excel document that contains only 1 worksheet.
ExportProperties.Workbook = new Workbook();
// Add additional worksheets.
ExportProperties.Workbook.Worksheets.Add();
ExportProperties.Workbook.Worksheets.Add();
// Define the Gridsheet index where Grid data must be exported.
ExportProperties.GridSheetIndex = 0;
await Grid.ExportToExcelAsync(ExportProperties);
}
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName)
{
this.OrderID = orderID;
this.CustomerID = customerID;
this.Freight = freight;
this.ShipCity = shipCity;
this.ShipName = shipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count == 0)
{
Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier"));
Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export"));
Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos"));
Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel"));
Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial"));
Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen"));
Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia"));
Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery"));
}
return Orders;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double Freight { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Conditional cell formatting
The Syncfusion® Blazor DataGrid supports conditional formatting of cells in the exported Excel document. This feature enables customizing the appearance of specific cells based on values or defined criteria.
To apply conditional formatting during export:
-
Handle the ExcelQueryCellInfoEvent event. This event is triggered for each cell during the Excel export process.
-
Access the args.Style property from the event argument and modify its properties such as
BackColorbased on condition.
The cell object can also be accessed using the args.Cell.CellStyle property to apply styles conditionally.
In this configuration, the Freight column is conditionally formatted in the exported Excel document based on its value using the ExcelQueryCellInfoEvent event. The QueryCellInfo event is used to apply similar styling to the Grid UI.
@using Syncfusion.Blazor.Grids
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowExcelExport="true" Toolbar="@(new List<string>() { "ExcelExport" })" Height="348">
<GridEvents QueryCellInfo="QueryCellInfoHandler" ExcelQueryCellInfoEvent="ExcelQueryCellInfoHandler" OnToolbarClick="ToolbarClickHandler" TValue="OrderData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true" />
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150" />
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120" />
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="150" />
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="150" />
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.Id == "Grid_excelexport")
{
await Grid.ExportToExcelAsync();
}
}
public void QueryCellInfoHandler(Syncfusion.Blazor.Grids.QueryCellInfoEventArgs<OrderData> args)
{
if (args.Column.Field == "Freight")
{
if (args.Data.Freight < 30)
{
args.Cell.AddStyle(new[] { "background-color: #99ffcc" });
}
else if (args.Data.Freight < 60)
{
args.Cell.AddStyle(new[] { "background-color: #ffffb3" });
}
else
{
args.Cell.AddStyle(new[] { "background-color: #ff704d" });
}
}
}
public void ExcelQueryCellInfoHandler(ExcelQueryCellInfoEventArgs<OrderData> args)
{
if (args.Column.Field == "Freight")
{
if (args.Data.Freight < 30)
{
args.Style.BackColor = "#99ffcc";
}
else if (args.Data.Freight < 60)
{
args.Style.BackColor = "#ffffb3";
}
else
{
args.Style.BackColor = "#ff704d";
}
}
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName)
{
this.OrderID = orderID;
this.CustomerID = customerID;
this.Freight = freight;
this.ShipCity = shipCity;
this.ShipName = shipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count == 0)
{
Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier"));
Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export"));
Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos"));
Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel"));
Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial"));
Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen"));
Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia"));
Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery"));
}
return Orders;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double Freight { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Adding header and footer in the exported Excel document
The Excel or CSV export feature in Syncfusion® Blazor DataGrid supports including header and footer content in the exported Excel or CSV document. This feature is useful for adding additional information such as branding, contact details, or summary notes.
To include header and footer content:
-
Handle the OnToolbarClick event.
- Define the Header and Footer properties in the ExcelExportProperties object.
- Header: Defines the header content for the exported document.
- Footer: Defines the footer content for the exported document.
-
Assign the header and footer content using a collection of ExcelRow and ExcelCell objects.
- Invoke ExportToExcelAsync to export the Grid with the configured header and footer.
@using Syncfusion.Blazor.Grids
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowExcelExport="true" Toolbar="@(new List<string>() { "ExcelExport" })" Height="348">
<GridEvents OnToolbarClick="ToolbarClickHandler" TValue="OrderData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true" />
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150" />
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="150" />
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="150" />
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.Id == "Grid_excelexport")
{
var exportProperties = new ExcelExportProperties();
var header = new ExcelHeader { HeaderRows = 8 };
// Initialize the list of rows for the header.
header.Rows = new List<ExcelRow>
{
// Add a new row to the header with specific cells.
new ExcelRow
{
// Define the cells within this row.
Cells = new List<ExcelCell>
{
new ExcelCell
{
ColSpan = 4,
Value = "Northwind Traders",
Style = new ExcelStyle
{
FontColor = "#C67878",
FontSize = 20,
HAlign = ExcelHorizontalAlign.Center,
Bold = true
}
}
}
},
new ExcelRow
{
Cells = new List<ExcelCell>
{
new ExcelCell
{
ColSpan = 4,
Value = "2501 Aerial Center Parkway",
Style = new ExcelStyle
{
FontColor = "#C67878",
FontSize = 15,
HAlign = ExcelHorizontalAlign.Center,
Bold = true
}
}
}
},
new ExcelRow
{
Cells = new List<ExcelCell>
{
new ExcelCell
{
ColSpan = 4,
Value = "Suite 200 Morrisville, NC 27560 USA",
Style = new ExcelStyle
{
FontColor = "#C67878",
FontSize = 15,
HAlign =ExcelHorizontalAlign.Center,
Bold = true
}
}
}
},
new ExcelRow
{
Cells = new List<ExcelCell>
{
new ExcelCell
{
ColSpan = 4,
Value = "Tel +1 888.936.8638 Fax +1 919.573.0306",
Style = new ExcelStyle
{
FontColor = "#C67878",
FontSize = 15,
HAlign = ExcelHorizontalAlign.Center,
Bold = true
}
}
}
},
new ExcelRow
{
Cells = new List<ExcelCell>
{
new ExcelCell
{
ColSpan = 4,
Hyperlink = new Hyperlink { Target = "https://www.northwind.com/", DisplayText = "www.northwind.com" },
Style = new ExcelStyle { HAlign = ExcelHorizontalAlign.Center }
}
}
},
new ExcelRow
{
Cells = new List<ExcelCell>
{
new ExcelCell
{
ColSpan = 4,
Hyperlink = new Hyperlink { Target = "mailto:[email protected]" },
Style = new ExcelStyle { HAlign = ExcelHorizontalAlign.Center }
}
}
},
new ExcelRow { },
new ExcelRow { }
};
var footer = new ExcelFooter { FooterRows = 4 };
// Initialize the list of footer rows.
footer.Rows = new List<ExcelRow>
{
new ExcelRow { },
new ExcelRow { },
new ExcelRow
{
// Define the cells within this row.
Cells = new List<ExcelCell>
{
new ExcelCell
{
ColSpan = 4,
Value = "Thank you for your business!",
Style = new ExcelStyle { HAlign = ExcelHorizontalAlign.Center, Bold = true }
}
}
},
new ExcelRow
{
Cells = new List<ExcelCell>
{
new ExcelCell
{
ColSpan = 4,
Value = "!Visit Again!",
Style = new ExcelStyle { HAlign = ExcelHorizontalAlign.Center, Bold = true }
}
}
}
};
exportProperties.Header = header;
exportProperties.Footer = footer;
await Grid.ExportToExcelAsync(exportProperties);
}
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName)
{
this.OrderID = orderID;
this.CustomerID = customerID;
this.Freight = freight;
this.ShipCity = shipCity;
this.ShipName = shipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count == 0)
{
Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier"));
Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export"));
Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos"));
Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel"));
Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial"));
Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen"));
Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia"));
Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery"));
}
return Orders;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double Freight { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Exporting Grid Data as Stream
The Syncfusion® Blazor DataGrid supports exporting Grid data as a memory stream, enabling programmatic handling before saving or processing. This includes exporting Grid data as a memory stream, merging multiple memory streams, and converting the memory stream to a file stream for download.
Exporting Grid Data as Memory Stream
The export-to-memory-stream feature enables exporting Grid data to a memory stream instead of saving it directly to a file. This approach is useful for generating and serving the file directly to the client without storing it on the server.
To export as a memory stream:
-
Handle the OnToolbarClick event.
-
Invoke the ExportToExcelAsync or ExportToCsvAsync method with the
asMemoryStreamparameter set to true. -
Use JavaScript interop to trigger the browser download from the memory stream.
The provided example showcases the process of exporting the file as a memory stream and sending the byte to initiate a browser download:
JavaScript Setup for File Download
To enable browser-based download of the exported memory stream, configure the JavaScript environment as follows:
Step 1: Add JavaScript for file download
Create a JavaScript file named saveAsFile.js under the wwwroot directory and define the following function:
function saveAsFile(filename, bytesBase64) {
var link = document.createElement('a');
link.download = filename;
link.href = "data:application/octet-stream;base64," + bytesBase64;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}Step 2: Register the JavaScript file
Include the script reference in the application:
- For Blazor Server, add the script reference in the App.razor file.
- For Blazor WebAssembly, add the script reference in the wwwroot/index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="BlazorApp1.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<script src="saveAsFile.js"></script>
<HeadOutlet @rendermode="InteractiveServer" />
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>
<body>
<Routes @rendermode="InteractiveServer" />
<script src="_framework/blazor.web.js"></script>
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>
</html>Step 3: Export Grid data as memory stream and invoke the JavaScript function
In the Index.razor file, configure the Grid and handle the export operation in the OnToolbarClick event. Use the ExportToExcelAsync method with the asMemoryStream parameter set to true, and invoke the saveAsFile JavaScript function to download the exported Excel file.
@using Syncfusion.Blazor.Grids
@using System.IO;
@using Syncfusion.XlsIO
@using Syncfusion.ExcelExport;
@inject IJSRuntime JSRuntime
<SfGrid ID="Grid" @ref="DefaultGrid" DataSource="@Orders" Toolbar="@(new List<string>() { "ExcelExport"})" AllowExcelExport="true" AllowPaging="true">
<GridEvents OnToolbarClick="ToolbarClickHandler" TValue="OrderData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true" />
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150" />
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120" />
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="150" />
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="150" />
</GridColumns>
</SfGrid>
@code{
private SfGrid<OrderData> Grid;
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.Id == "Grid_excelexport") //Id is combination of Grid's ID and itemname.
{
MemoryStream streamDoc = await Grid.ExportToExcelAsync(asMemoryStream: true);
await JSRuntime.InvokeVoidAsync("saveAsFile", new object[] { "ExcelStream.xlsx", Convert.ToBase64String(streamDoc.ToArray()), true });
}
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName)
{
this.OrderID = orderID;
this.CustomerID = customerID;
this.Freight = freight;
this.ShipCity = shipCity;
this.ShipName = shipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count == 0)
{
Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier"));
Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export"));
Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos"));
Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel"));
Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial"));
Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen"));
Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia"));
Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery"));
}
return Orders;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double Freight { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}A complete sample is available on GitHub.
Converting Memory Stream to File Stream for Excel Export
The Excel Export feature in Syncfusion® Blazor DataGrid allows exporting Grid data to an Excel workbook. In scenarios where the exported document needs to be saved as a physical file on the system, the memory stream can be converted into a file stream. This is useful when storing or processing the file outside the browser context.
To save the exported Excel file locally:
- Handle the OnToolbarClick event.
- Invoke the ExportToExcelAsync or ExportToCsvAsync method with the
asMemoryStreamparameter set to true. - Convert the resulting
MemoryStreaminto aFileStreamand save it to a specified path.
In this configuration, the memory stream is converted and saved as a file named SampleTestExcel.xlsx.
@using Syncfusion.Blazor.Grids
@using System.IO;
@using Syncfusion.XlsIO
@using Syncfusion.ExcelExport;
@inject IJSRuntime JSRuntime
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" Toolbar="@(new List<string>() { "ExcelExport"})" AllowExcelExport="true" AllowPaging="true">
<GridEvents OnToolbarClick="ToolbarClickHandler" TValue="OrderData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true" />
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150" />
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120" />
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="150" />
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="150" />
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.Id == "Grid_excelexport") //Id is combination of Grid's ID and itemname.
{
MemoryStream streamDoc = await Grid.ExportToExcelAsync(asMemoryStream: true);
//Create a copy of streamDoc1 to read the memory stream.
MemoryStream copyOfStreamDoc1 = new MemoryStream(streamDoc.ToArray());
//For creating the exporting location with file name, for this need to specify the physical exact path of the file.
string filePaths = "C:Users/abc/Downloads/SampleTestExcel.xlsx";
// Create a FileStream to write the memory stream contents to a file.
using (FileStream fileStream = File.Create(filePaths))
{
// Copy the memory stream data to the FileStream.
copyOfStreamDoc1.CopyTo(fileStream);
}
}
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName)
{
this.OrderID = orderID;
this.CustomerID = customerID;
this.Freight = freight;
this.ShipCity = shipCity;
this.ShipName = shipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count == 0)
{
Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier"));
Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export"));
Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos"));
Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel"));
Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial"));
Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen"));
Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia"));
Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery"));
}
return Orders;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double Freight { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}A complete sample is available on GitHub.
Merging Two Excel Memory Streams
To merge two Excel memory streams and export the combined file as a single Excel workbook, use the Syncfusion.Blazor.XlsIO library to copy worksheets between workbooks.
In this configuration, two memory streams are used:
- streamDoc1: Represents the default Grid export.
-
streamDoc2: Represents a customized Grid export using ExcelExportProperties.
The merging process combines the contents of both streams into a single workbook, which is then exported as a memory stream and downloaded via JavaScript interop.
@using Syncfusion.Blazor.Grids
@using System.IO;
@using Syncfusion.XlsIO
@using Syncfusion.ExcelExport;
@inject IJSRuntime JSRuntime
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" Toolbar="@(new List<string>() { "ExcelExport"})" AllowExcelExport="true" AllowPaging="true">
<GridEvents OnToolbarClick="ToolbarClickHandler" TValue="OrderData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true" />
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150" />
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120" />
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="150" />
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="150" />
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
if (args.Item.Id == "Grid_excelexport") //Id is combination of Grid's ID and itemname.
{
//Merging two memory stream for Excel export.
MemoryStream mergedStream = new MemoryStream();
MemoryStream streamDoc1 = await Grid.ExportToExcelAsync(asMemoryStream: true);
//Create a copy of streamDoc1 to access the memory stream.
MemoryStream copyOfStreamDoc1 = new MemoryStream(streamDoc1.ToArray());
//Customized Grid memory stream.
ExcelExportProperties ExcelProperties = new ExcelExportProperties();
ExcelTheme Theme = new ExcelTheme();
ExcelStyle ThemeStyle = new ExcelStyle()
{
BackColor = "#C67878"
};
Theme.Header = ThemeStyle;
Theme.Record = ThemeStyle;
ExcelProperties.Theme = Theme;
MemoryStream streamDoc2 = await Grid.ExportToExcelAsync(asMemoryStream: true, ExcelProperties);
//Create a copy of streamDoc2 to access the memory stream.
MemoryStream copyOfStreamDoc2 = new MemoryStream(streamDoc2.ToArray());
using (ExcelEngine excelEngine = new ExcelEngine())
{
IApplication application = excelEngine.Excel;
application.DefaultVersion = ExcelVersion.Xlsx;
IWorkbook workbook1 = application.Workbooks.Open(copyOfStreamDoc1);
IWorkbook workbook2 = application.Workbooks.Open(copyOfStreamDoc2);
//Copy first worksheet from the workbook1 workbook to the workbook2 workbook.
workbook2.Worksheets.AddCopy(workbook1.Worksheets[0]);
workbook2.ActiveSheetIndex = 1;
//Saving merged workbook as memory stream.
workbook2.SaveAs(mergedStream);
}
await JSRuntime.InvokeVoidAsync("saveAsFile", new object[] { "MemoryStreamMerge.xlsx", Convert.ToBase64String(mergedStream.ToArray()), true });
}
}
}function saveAsFile(filename, bytesBase64) {
var link = document.createElement('a');
link.download = filename;
link.href = "data:application/octet-stream;base64," + bytesBase64;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName)
{
this.OrderID = orderID;
this.CustomerID = customerID;
this.Freight = freight;
this.ShipCity = shipCity;
this.ShipName = shipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count == 0)
{
Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier"));
Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export"));
Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos"));
Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel"));
Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial"));
Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen"));
Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia"));
Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery"));
}
return Orders;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double Freight { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}A complete sample is available on GitHub.