How to Download an Updated ASP.NET Core SpreadSheet as an Excel File?

The knowledge base article explains how to download an updated ASP.NET Core Spreadsheet as an Excel file when a hyperlink is clicked. To achieve this, create an anchor element with the href and download attributes, then save the Excel file to the anchor element. This can be done by using the Spreadsheet’s save method within both the created and actionComplete events, ensuring that any updates made in the Spreadsheet are captured.

Then, you need to set the needBlobData property to true and the isFullPost property to false in the beforeSave event of the Spreadsheet to get the blob data of Spreadsheet. This event triggers before saving the Spreadsheet.

In the saveComplete event, you will receive the Spreadsheet as blob data via the blobData property. You can then generate a URL from this blob data and update the href attribute of the anchor element with the generated URL. As a result, any changes made in the Spreadsheet will be reflected in the anchor element and clicking it will download the updated Excel file.

[CSHTML]:

<div class="wrapper" style="height: 600px">
   <div>
       <a href="#" download="Sample.xlsx" id="downloadLink" >Download File</a>
       <button class="e-btn" onclick="saveHandler()">Save</button>
   </div>
   <div>
       <ejs-spreadsheet id="spreadsheet" created="created" actionComplete="actionComplete" beforeSave="beforeSave" saveComplete="saveComplete" openUrl="Home/Open" saveUrl="Home/Save">
           <e-spreadsheet-sheets>
               <e-spreadsheet-sheet name="Car Sales Report">
                   <e-spreadsheet-ranges>
                       <e-spreadsheet-range dataSource="ViewBag.DefaultData"></e-spreadsheet-range>
                   </e-spreadsheet-ranges>
                   <e-spreadsheet-columns>
                       <e-spreadsheet-column width="180"></e-spreadsheet-column>
                       <e-spreadsheet-column width="130"></e-spreadsheet-column>
                       <e-spreadsheet-column width="130"></e-spreadsheet-column>
                       <e-spreadsheet-column width="180"></e-spreadsheet-column>
                       <e-spreadsheet-column width="130"></e-spreadsheet-column>
                       <e-spreadsheet-column width="120"></e-spreadsheet-column>
                   </e-spreadsheet-columns>
               </e-spreadsheet-sheet>
           </e-spreadsheet-sheets>
       </ejs-spreadsheet>
   </div>
</div>

<script>

   function saveHandler() {
       var spreadsheet = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
       
       // Convert the spreadsheet workbook to JSON data.
       spreadsheet.saveAsJson().then((json) => {
           const formData = new FormData();
           formData.append('FileName', "Sample");
           formData.append('saveType', 'Xlsx');
           // Passing the JSON data to formData.
           formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook));
           formData.append('PdfLayoutSettings', JSON.stringify({ FitSheetOnOnePage: false }));
           // Using fetch call to send the saved JSON to server.
           fetch('Home/Save', {
               method: 'POST',
               body: formData
           }).then((response) => {
               console.log(response);
           })
       });
   }

   function created() {
       var spreadsheet = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
       //To save the current file to the href of hyperlink.
       spreadsheet.save({ url: 'https://localhost:7016/Home/Save', fileName: 'Sample', saveType: "Xlsx" });
   }

   function actionComplete(args) {
       var spreadsheet = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
       //To save the updated file to the href of hyperlink.
       spreadsheet.save({ url: 'https://localhost:7016/Home/Save', fileName: 'Sample', saveType: "Xlsx" });
   }

   function beforeSave(args) {
       args.needBlobData = true; // To trigger the saveComplete event.
       args.isFullPost = false; // Get the spreadsheet data as blob data in the saveComplete event.
   }

   function saveComplete(args) {
       //Update the current changes to the file in href of hyperlink.
       var downloadLink = document.getElementById('downloadLink');
       var url = URL.createObjectURL(args.blobData);

       // Update the href attribute of the anchor tag
       downloadLink.href = url;
   }

</script> 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication(2)988995338

Output:

For more information on hyperlinks and save action, you can refer to the UG links mentioned below.

https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/link
https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/open-save#save

Conclusion
I hope you enjoyed learning how to download an updated ASP.NET Core spreadsheet as an Excel File.

You can refer to our ASP.NET Core spreadsheet feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET Core Spreadsheet Example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries 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!