In this article I will explain with an example, how to export HTML Table to Excel file using jQuery in ASP.Net.
HTML Markup
The HTML Markup consists of an HTML Table and a Button.
<table id="tblCustomers">
<tr>
<th>Customer Id</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>1</td>
<td>John Hammond</td>
<td>United States</td>
</tr>
<tr>
<td>2</td>
<td>Mudassar Khan</td>
<td>India</td>
</tr>
<tr>
<td>3</td>
<td>Suzanne Mathews</td>
<td>France</td>
</tr>
<tr>
<td>4</td>
<td>Robert Schidner</td>
<td>Russia</td>
</tr>
</table>
<br/>
<asp:Button ID="btnExport" Text="Export" runat="server" />
Exporting HTML Table to Excel using jQuery in ASP.Net
Inside the jQuery document ready event handler, the Export Button has been assigned a jQuery Click event handler.
When the Export Button is clicked, the jQuery table2excel plugin is applied to the HTML Table and it is converted (exported) to Excel file.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/table2excel.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=btnExport]").click(function () {
$("#tblCustomers").table2excel({
filename: "Table.xls"
});
return false;
});
});
</script>
Screenshots
The HTML Table
Excel file being downloaded when Export Button is clicked
The generated Excel file
Browser Compatibility
The above code has been tested in the following browsers.
* All browser logos displayed above are property of their respective owners.
Demo
Downloads