Export HTML Table to Excel with Custom FileName using JavaScript and jQuery

In this article I will explain with an example, how to export HTML Table to Excel file with a Custom File Name using JavaScript and jQuery.

The jQuery table2excel plugin provides feature to set a Custom File Name of the exported Excel file.

HTML Markup

The following HTML Markup consists of an HTML Table and a Button.

<head>

body

{

font-family: Arial;

font-size: 10pt;

}

table

{

border: 1px solid #ccc;

border-collapse: collapse;

}

table th

{

background-color: #F7F7F7;

color: #333;

font-weight: bold;

}

table th, table td

{

padding: 5px;

border: 1px solid #ccc;

}

</style>

</head>

<body>

<tr>

<th>Customer Id</th>

<th>Country</th>

</tr>

<tr>

<td>John Hammond</td>

<td>United States</td>

</tr>

<tr>

<td>Mudassar Khan</td>

<td>India</td>

</tr>

<tr>

<td>Suzanne Mathews</td>

<td>France</td>

</tr>

<tr>

<td>Robert Schidner</td>

<td>Russia</td>

</tr>

</table>

<br />

function Export() {

$("#tblCustomers").table2excel({

filename: "Table.xls"

});

}

</script>

</body>

</html>

Explanation:

When the Export Button is clicked, the JavaScript Export function gets called.

Inside the Export function, the jQuery table2excel plugin is applied to the HTML Table. The jQuery table2excel plugin accepts filename parameter which sets the name of the Excel file.

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