Export to excel table without hitting server using Jquery

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
ExportToExcel1 ExportToExcel2

 

 

 

 

I hope this article is useful for you . Happy Coding !!!

Leave a Reply

Your email address will not be published. Required fields are marked *