Convert Excel document to Image in Blazor Server Web application

5 Nov 202510 minutes to read

Syncfusion^® XlsIO is a .NET Core Excel library used to create, read, edit and convert Excel documents programmatically without Microsoft Excel or interop dependencies. Using this library, you can convert an Excel document to Image in Blazor Server Web application.

Steps to convert Excel document to Image in Blazor Server Web application

Step 1: Create a new C# Blazor Web application project.

Step 2: Name the project.

Step 3: Select the framework and click Create button.

Step 4: Install the Syncfusion.XlsIORenderer.Net.Core NuGet package as reference to your Blazor web application from NuGet.org.

NOTE

Starting with v16.2.0.x, if you reference Syncfusion^® assemblies from trial setup or from the NuGet feed, you also have to add “Syncfusion.Licensing” assembly reference and include a license key in your projects. Please refer to this link to know about registering Syncfusion^® license key in your applications to use our components.

Step 5: Create a razor file with name as Excel under Pages folder, which is located inside the Components folder and include the following namespaces in the file.

C#

@rendermode InteractiveServer
   @page "/excel"
   @using System.IO;
   @using ConvertExceltoImage;
   @inject ConvertExceltoImage.Components.Data.ExcelService service
   @inject Microsoft.JSInterop.IJSRuntime JS

Step 6: Add the following code to create a new button.

CSHTML

<h2>Syncfusion Excel library (Essential XlsIO)</h2>
   <p>Syncfusion Excel library (Essential XlsIO)  is a Blazor Excel library used to create, read, edit, and convert Excel files in your applications without Microsoft Office dependencies.</p>
   <button class="btn btn-primary" @onclick="@ConvertExceltoImage">Convert Excel to Image</button>

Step 7: Add the following code in Excel.razor file to convert Excel document to Image.

C#

@code {
       MemoryStream excelStream;
   
       /// <summary>
       /// Convert Excel document to Image
       /// </summary>
       private async Task ConvertExceltoImage()
       {
           excelStream = service.ExceltoImage();
           await JS.SaveAs("Sample.jpeg", excelStream.ToArray());
       }
   }

Step 8: Create a new cs file with name as ExcelService under Data folder and include the following namespaces in the file.

C#

using Syncfusion.XlsIO;
   using Syncfusion.XlsIORenderer;
   using System.IO;

Step 9: Create a new MemoryStream method with name as Excel​toImage and include the following code snippet to convert Excel document to Image in Blazor Server web application.

C#

//Create an instance of ExcelEngine
   using (ExcelEngine excelEngine = new ExcelEngine())
   {
       IApplication application = excelEngine.Excel;
       application.DefaultVersion = ExcelVersion.Xlsx;
   	IWorkbook workbook = application.Workbooks.Open("InputTemplate.xlsx");
       IWorksheet worksheet = workbook.Worksheets[0];
   
       //Initialize XlsIORenderer
       application.XlsIORenderer = new XlsIORenderer();
   
       //Create the MemoryStream to save the image
       MemoryStream imageStream = new MemoryStream();
   
       //Save the converted image to MemoryStream
       worksheet.ConvertToImage(worksheet.UsedRange, imageStream);
       imageStream.Position = 0;
   
       //Download image in the browser
       return imageStream;
   }

Step 10: Create a new class file in the project, with name as FileUtils and add the following code to invoke the JavaScript action for downloading the file in browser.

C#

public static class FileUtils
   {
       public static ValueTask<object> SaveAs(this IJSRuntime js, string filename, byte[] data)
           => js.InvokeAsync<object>(
              "saveAsFile",
              filename,
              Convert.ToBase64String(data));
   }

Step 11: Add the following JavaScript function in the App.razor.

C#

<script type="text/javascript">
       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);
           }
       }
   </script>

Step 12: Add the following code in Na​vMenu.razor file present under Layout folder.

C#

<div class="nav-item px-3">
    <NavLink class="nav-link" href="excel">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Convert Excel to Image
    </NavLink>
</div>

Step 13: Add the service in the Program.cs file.

C#

builder.Services.AddScoped<ConvertExceltoImage.Components.Data.ExcelService>();

A complete working example of how to convert Excel to Image in Blazor Server web application in C# is present on this GitHub page.