Export to Excel in MVC


Introduction

In this blog we are going to discuss how to export data from HTML table to excel sheet using client site codes like javascript code. This is applicable to any web application which uses HTML elements to present data on the web page.

Getting Started

Here the codes we are going to discuss which will export data to excel are simple JavaScript code, we are not going to use any third-party library or server-side codes (like C# or any other language code). The JavaScript codes are even eligible to capture the background, foreground color, and border style of a table row or table cell.

You won’t believe that only two steps of codes will help us to export data to excel. The fist will create the object of the HTML table in which data will be exported. Then we will create an anchor element at runtime, with the help of the anchor element will download an excel file.

The code we are going to discuss is applicable to any web application which uses HTML elements to present data and that application has capable to use JavaScript, but here we will take an example of MVC application.

Let’s say you have already written code in action method of controller and view of your MVC application to display student details data in table structure like below image and you want to export those table structured data into excel sheet.

export to excel in mvc web api
Export to excel in MVC

First will provide an id to the table which data we will export to excel. It will help us to create an object of the table using HTML DOM, here I have given 'printTable' as id to the table. Then will create an HTML anchor element at runtime where we will pass HTML table content as a parameter. See the below code for more details.

 // Create download link element  
 downloadurl = document.createElement("a");  
 document.body.appendChild(downloadurl);  
 downloadurl.href = 'data:' + dataFileType + ', ' + tableHTMLData;  
 downloadurl.download = filename;  
 downloadurl.click();  

Create JavaScript function ‘exportToExcel’ and copy the below codes inside it, your function should look like below.

 <script type="text/javascript">  
 function exportToExcel(){  
      var downloadurl;  
      var dataFileType = 'application/vnd.ms-excel';  
      var tableSelect = document.getElementById('printTable');  
      var tableHTMLData = tableSelect.outerHTML.replace(/ /g, '%20');  
   // Specify file name  
   filename = 'StudentDetails.xls';  
   // Create download link element  
   downloadurl = document.createElement("a");  
   document.body.appendChild(downloadurl);  
   if(navigator.msSaveOrOpenBlob){  
     var blob = new Blob(['\ufeff', tableHTMLData], {  
       type: dataFileType  
     });  
     navigator.msSaveOrOpenBlob( blob, filename);  
   }else{  
     // Create a link to the file  
     downloadurl.href = 'data:' + dataFileType + ', ' + tableHTMLData;  
     // Setting the file name  
     downloadurl.download = filename;  
     //triggering the function  
     downloadurl.click();  
   }  
 }  
 </script>  

Add one HTML button control to the page and in the click event of button mention, the above function name like below and your page should look like below image with the button.

 <button onclick="exportToExcel()">Export To Exce  
export data from database table to excel file in asp net mvc
Export to excel in MVC using JavaScript

Now you are done with code, run your application, and verify the download. If you are still facing any problem, try the below code which contains full code to export data.

 <HTML>  
 <HEAD>  
 <TITLE>  
 Print html table  
 </TITLE>  
 <script type="text/javascript">  
 function exportToExcel(){  
   var downloadurl;  
   var dataFileType = 'application/vnd.ms-excel';  
   var tableSelect = document.getElementById('printTable');  
   var tableHTMLData = tableSelect.outerHTML.replace(/ /g, '%20');  
   // Specify file name  
   filename = 'StudentDetails.xls';  
   // Create download link element  
   downloadurl = document.createElement("a");  
   document.body.appendChild(downloadurl);  
   if(navigator.msSaveOrOpenBlob){  
     var blob = new Blob(['\ufeff', tableHTMLData], {  
       type: dataFileType  
     });  
     navigator.msSaveOrOpenBlob( blob, filename);  
   }else{  
     // Create a link to the file  
     downloadurl.href = 'data:' + dataFileType + ', ' + tableHTMLData;  
     // Setting the file name  
     downloadurl.download = filename;  
     //triggering the function  
     downloadurl.click();  
   }  
 }  
 </script>  
 </HEAD>  
 <BODY>  
 <table border="1px solid black;" style="border-collapse:collapse;" id="printTable">  
      <tbody><tr>  
           <th bgcolor="NAVY" style="padding:5px"><font color="white"> Student Name</font></th>  
           <th bgcolor="NAVY" style="padding:5px"><font color="white">Roll No.</font></th>  
           <th bgcolor="NAVY" style="padding:5px"><font color="white">DIV</font></th>  
           <th bgcolor="NAVY" style="padding:5px"><font color="white">STD</font></th>       
           <th bgcolor="NAVY" style="padding:5px"><font color="white">GRNO</font></th>            
           <th bgcolor="NAVY" style="padding:5px"><font color="white">Card No.</font></th>  
      </tr>  
 <TR><TD >Kailash</TD><TD>1</TD><TD>A</TD><TD>VII</TD><TD>102751</TD><TD>0005717471</TD></TR>  
 <TR><TD>Panchanan</TD><TD>2</TD><TD>B</TD><TD>VII</TD><TD>102752</TD><TD>0005717472</TD></TR>  
 <TR><TD>Sanjay</TD><TD>3</TD><TD>C</TD><TD>VII</TD><TD>102753</TD><TD>0005717473</TD></TR>  
 <TR><TD>Duti Krishna</TD><TD>4</TD><TD>D</TD><TD>VII</TD><TD>102754</TD><TD>0005717474</TD></TR>  
 <TR><TD>Ganesh</TD><TD>5</TD><TD>A</TD><TD>VII</TD><TD>102755</TD><TD>0005717475</TD></TR>  
 <TR><TD>Hrushi</TD><TD>6</TD><TD>B</TD><TD>VII</TD><TD>102756</TD><TD>0005717476</TD></TR>  
 <TR><TD>Samir</TD><TD>7</TD><TD>C</TD><TD>VII</TD><TD>102757</TD><TD>0005717477</TD></TR>  
 <TR><TD>Radhika</TD><TD>8</TD><TD>D</TD><TD>VII</TD><TD>10278</TD><TD>0005717478</TD></TR>  
 <TR><TD>Krishna</TD><TD>9</TD><TD>A</TD><TD>VII</TD><TD>102759</TD><TD>0005717470</TD></TR>  
 <TR><TD>Nilanchal</TD><TD>10</TD><TD>B</TD><TD>VII</TD><TD>102760</TD><TD>0005717480</TD></TR>  
 </tbody></table>  
 <br />  
 <button onclick="exportToExcel()">Export To Excel</button>  
 </BODY>  
 </HTML>  

Summary

In the above Export to Excel in MVC, we have discussed how to export HTML table data into excel file using simple JavaScipt Code. I hope you enjoyed it.

Thanks