JQuery Table2 Excel Example Tutorial

jquery , Html , Css

Nicesnippets

113

22-07-2020


Hi Guys

In this tutorial, I will example you how to jquery table2 excel in convert. I am going to share an awesome plug-in for exporting the HTML table data to the excel sheet by a click of a button.

The table contains the <th> tags that define the headings for the table of HTML. The same headers act as the headings in the excel sheet after export. A few options may also be set like tab name in the excel sheet, the file name of excel etc in the jQuery code that I will explain after the demo.

Bellow The Script Used In The Demo:

<script>

$(function() {

$("button").click(function(){

$("#table2excel").table2excel({

exclude: ".noExl",

name: "Excel Document Name"

});

});

});

</script>

Here this example,the excel export file will download as the demo page loads.

Full 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">

body{

background-color: #211c12;

}

.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-6 col-md-offset-3">

<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>

It will help you...


Recommended Posts