How to export HTML Table to Excel file using Javascript
Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article, i will explain with that how we can export HTML Table to Excel file using Javascript in HTML. The HTML Table will be exported or converted to Excel sheet using the Jquery table to excel plugin in HTML. I used Jquery in this article for the only use of Jquery plugin. Download table2excel.js file from below mentioned link and please it in the folder named script folder in the main folder of your project,
https://drive.google.com/file/d/1rgkGqOwAxlqN4Niq08jWm_b7X05kEYaW/view?usp=sharing
Code for HTML Page
On the HTML page I will place the Table and a Button with the id named Button_export. On the OnClientClick event handler of the i assigned a JavaScript function named Table_Export().
<table id="table_Companies">
<tr>
<th>Product ID </th>
<th>Name</th>
<th>Price</th>
</tr>
<tr>
<td>1</td>
<td>Bata </td>
<td>400</td>
</tr>
<tr>
<td>2</td>
<td>Reebok</td>
<td>780</td>
</tr>
<tr>
<td>3</td>
<td>Redtape</td>
<td>670</td>
</tr>
<tr>
<td>4</td>
<td>Liberty</td>
<td>560</td>
</tr>
<tr>
<td>5</td>
<td>Adidas </td>
<td>860</td>
</tr>
<tr>
<td>6</td>
<td>PUMA </td>
<td>1000</td>
</tr>
</table>
<br/>
<input type="button" id="btn_Submit" value="Submit" onclick="Export_table()" />
Export HTML Table to Excel using JavaScript in HTML.
When I will click on the export button, the JavaScript Table_Export function is called.
Inside the Table_Export function, the jQuery table2excel plugin is applied to the HTML Table and it is converted (exported) to Excel file.
The jQuery table2excel plugin accepts filename parameter which sets the name of the 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 Table_Export() {
$("#table_Companies").table2excel({
filename: "Table.xls"
});
retuen false;
}
</script>
Here I am giving the whole code of HTML page. You can copy and paste the complete code to enjoy the execution of this program.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Export HTML Table to Excel </title>
<style type="text/css">
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>
<form id="form1">
<table id="table_Companies">
<tr>
<th>Product ID </th>
<th>Name</th>
<th>Price</th>
</tr>
<tr>
<td>1</td>
<td>Bata </td>
<td>400</td>
</tr>
<tr>
<td>2</td>
<td>Reebok</td>
<td>780</td>
</tr>
<tr>
<td>3</td>
<td>Redtape</td>
<td>670</td>
</tr>
<tr>
<td>4</td>
<td>Liberty</td>
<td>560</td>
</tr>
<tr>
<td>5</td>
<td>Adidas </td>
<td>860</td>
</tr>
<tr>
<td>6</td>
<td>PUMA </td>
<td>1000</td>
</tr>
</table>
<br />
<input type="button" id="btn_Submit" value="Submit" onclick="Export_table()" />
</form>
<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 Export_table() {
$("#table_Companies").table2excel({
filename: "Table.xls"
});
return false;
}
</script>
</body>
</html>
Conclusion: In above code, I have been explained that how how we can export HTML Table to Excel file using Javascript in HTML. This code is very helpful for every developer. Bye Bye and take care of yourself Developers. We will come back shortly with the new article.
Comments
Post a Comment