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 the capability 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 |
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();
JavaScript example to create export link
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>
JavaScript example to export to excel
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 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>
Related Articles
- Export DataTable To Excel in C#
- Export HTML Table to Excel Using JavaScript
- Export Table Data into XML in SQL
- Validating Excel Sheet in C#
- Creating controller for File Upload
- Reading Excel file in AngularJS
- Import XML into SQL Table
- Import Excel in C#
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