How to Export Data to Excel in Blazor using IronXL

In this tutorial, we explore exporting data in Excel using Blazor and IronXL within Visual Studio 2022. The process begins with setting up a saveAsFile.js script to create a download link for files, using a base64 byte array as input. This script is linked to the Blazor app by referencing it in the host.cshtml file. We then delve into the ExportExcel.cs file, which houses the main procedure for data conversion to Excel. Here, we define a method GenerateExcel to create and populate an Excel workbook and worksheet with sample data, headers, product names, SKUs, and customer information. Using JS interop, we call the JavaScript function to download the Excel file. The ExportExcel.razor file creates a button to trigger the GenerateExcel method, facilitated by an instance of IJSRuntime for JavaScript function invocation. Finally, the NavMenu.razor file is updated to include a navigation link to the Excel export page. Running the project allows us to generate and download an Excel file, showcasing the defined data, headers, and demonstrating IronXL's capabilities in Blazor.

Setup saveAsFile.js

// This script is responsible for converting a base64 string into a downloadable file link.
function saveAsFile(fileName, byteBase64) {
    var link = document.createElement('a'); // Create a link element
    link.download = fileName; // Set the download attribute with the filename
    link.href = "data:application/octet-stream;base64," + byteBase64; // Set the href to the base64 file data
    document.body.appendChild(link); // Append the link to the document body
    link.click(); // Programmatically click the link to trigger the download
    document.body.removeChild(link); // Remove the link from the document after download
}

// This script is responsible for converting a base64 string into a downloadable file link.
function saveAsFile(fileName, byteBase64) {
    var link = document.createElement('a'); // Create a link element
    link.download = fileName; // Set the download attribute with the filename
    link.href = "data:application/octet-stream;base64," + byteBase64; // Set the href to the base64 file data
    document.body.appendChild(link); // Append the link to the document body
    link.click(); // Programmatically click the link to trigger the download
    document.body.removeChild(link); // Remove the link from the document after download
}

Update host.cshtml

Reference the saveAsFile.js script within the _Host.cshtml file to ensure it is accessible from the Blazor app.

<script src="saveAsFile.js"></script>

<script src="saveAsFile.js"></script>

ExportExcel.cs

This file contains the method for generating an Excel file using IronXL.

Further Reading: How to Export Data to Excel in Blazor using IronXL