In this tutorial, We will learn how to jquery table2 HTML to excel. A plugin for exporting the HTML table data to the excel sheet with a click of a button.
Example:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Table2 Excel Example</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel/src/jquery.table2excel.js"></script>
</head>
<style type="text/css">
.container{
margin-top:80px;
}
h1{
margin-bottom:20px;
}
table,table th{
text-align: center;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="text-center">JQuery Table2 Excel Example</h1>
<table class="table table-bordered" id="table2excel">
<thead>
<tr style="background-color: #fff">
<th>#</th>
<th>Product Name</th>
<th>Product Price</th>
<th>Product Qut.</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>Product 1</td>
<td>200</td>
<td>2</td>
</tr>
<tr style="background-color: #fff">
<td>2</td>
<td>Product 2</td>
<td>220</td>
<td>5</td>
</tr>
<tr class="success">
<td>3</td>
<td>Product 3</td>
<td>300</td>
<td>4</td>
</tr>
<tr style="background-color: #fff">
<td>4</td>
<td>Product 4</td>
<td>500</td>
<td>2</td>
</tr>
<tr class="info">
<td>5</td>
<td>Product 5</td>
<td>550</td>
<td>8</td>
</tr>
</tbody>
</table>
<button class="btn btn-success">Export</button></div>
</div>
</div>
</div>
<script>
$(function () {
$("button").click(function () {
$("#table2excel").table2excel({
exclude: ".xls",
name: "Excel Document Name"
});
});
});
</script>
</body>
</html>
Thanks, May this example will help you...