Want to export the data to excel, but don’t want to hit server again and again ?? So here is the simple way out for you.
In the following steps you will understand how simply we can export the data to excel sheet by using jquery.
Step 1 : Add ExportToExcel.js file to your solution , code for this file is shown below.
function fnExportHTML(tableNames, headerbdColor, filename) {
//****************Validating input parameters********************************
if (tableNames.trim() === "") {
alert("No table supplied to export data!");
return;
}
if (headerbdColor.trim() === "") {
//Default Back Color
headerbdColor = "#87AFC6";
}
if (filename.trim() === "") {
//Default Filename
filename = "ExportedData";
}
//********************************************************************************
var export_data = "";
var arrTableNames = tableNames.split("|");
if (arrTableNames.length > 0) {
for (var i = 0 ; i < arrTableNames.length ; i++) {
export_data += "<table border='2px'><tr bgcolor='" + headerbdColor + "'>";
objTable = document.getElementById(arrTableNames[i]); // table to export
if (objTable === undefined) {
alert("Table not found!");
return;
}
for (var j = 0 ; j < objTable.rows.length ; j++) {
export_data += objTable.rows[j].innerHTML + "</tr>";
}
export_data += "</table>";
}
//*********Optional Code: In case not required, please comment it*********************
//For removing links in table data(if any)
export_data = export_data.replace(/<A[^>]*>|<\/A>/g, "");
//For removing images in table data(if any)
export_data = export_data.replace(/<img[^>]*>/gi, "");
// For reomving input params(if any)
export_data = export_data.replace(/<input[^>]*>|<\/input>/gi, "");
//*************************************************************************************
}
else {
alert("No table supplied to export data!");
return;
}
// If Internet Explorer(Not supported Data URIs), Check navigator details & find whether it is IE or NOT
if (window.navigator.userAgent.indexOf("MSIE ") > 0 || !!window.navigator.userAgent.match(/Trident.*rv\:11\./)) {
exportIF.document.open("txt/html", "replace");
exportIF.document.write(export_data);
exportIF.document.close();
exportIF.focus();
//SaveAs command to Save CSV File
sa = exportIF.document.execCommand("SaveAs", true, filename + ".xls");
}
else //other browsers : Chrome/FireFox (Supported Data URIs)
{
sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(export_data));
}
//return (sa);}
After adding the jquery file to your solution , let us now now move towards next step.
Step 2 : Now let us code for the view page .
<style>
#TestTable, th, td {
border: 1px solid black;
}
</style>
<script src="~/Scripts/ExportToExcel.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<button type="button" id="Button1">Export</button>
<table id="Table1" border="1">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rajat</td>
<td>M</td>
</tr>
<tr>
<td>2</td>
<td>Neha</td>
<td>F</td>
</tr>
<tr>
<td>3</td>
<td>Raghav</td>
<td>M</td>
</tr>
</tbody>
</table>
<script> $("#ExportTable").click(function (e) { fnExportHTML("TestTable", "yellow", "TestTable Data"); })</script>
<script src="~/Scripts/ExportToExcel.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<button type="button" id="ExportTable">Export</button>
<table id="TestTable" border="1">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rajat</td>
<td>M</td>
</tr>
<tr>
<td>2</td>
<td>Neha</td>
<td>F</td>
</tr>
<tr>
<td>3</td>
<td>Raghav</td>
<td>M</td>
</tr>
</tbody></table><script> $("#ExportTable").click(function (e) { fnExportHTML("TestTable", "yellow", "TestTable Data"); }) </script>
In script tag I have called out fnExportHTML function in which I have passed 3 parameters ,first one is the ID which has been given to the table to be exported second parameter is for the table header colour and third for the name of the excel file.
Step 3 : After completing step 1 & 2 now we can run our code and by clicking on the export button excel file will be downloaded to your pc
I hope this article is useful for you . Happy Coding !!!
