In this article I will explain with an example, how to convert (export) HTML Table to Excel file using JavaScript.
Note: jQuery is used in this article only for the use of jQuery plugin.
HTML Markup
The following HTML Markup consists of an HTML Table and a Button.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table id="tblCustomers" cellspacing="0" cellpadding="0">
<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 />
<input type="button" id="btnExport" value="Export" onclick="Export()" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="table2excel.js" type="text/javascript"></script>
<script type="text/javascript">
function Export() {
$("#tblCustomers").table2excel({
filename: "Table.xls"
});
}
</script>
</body>
</html>
Explanation:
When the Export Button is clicked, the JavaScript Export function gets called.
Note: You will get a Warning message from Microsoft Excel application when you try to open the generated Excel file. This Warning is shown because the generated file is not a valid Excel format as the plugin simply exports the HTML content to an Excel file.
Screenshots
The HTML Table
![Convert (Export) HTML Table to Excel file using JavaScript]()
Excel file being downloaded when Export Button is clicked
![Convert (Export) HTML Table to Excel file using JavaScript]()
The generated Excel file
![Convert (Export) HTML Table to Excel file using JavaScript]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
