Hi All,
In a following post we will see, how to export html table
to Excel by using JQuery.
To accomplish our task we need the following JS files,
jquery-1.10.2.js
jquery.battatech.excelexport.js (It is a free JS Plugin , which is used to export)
Add
reference of this files to your solution as below.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="JS/jquery.battatech.excelexport.js"></script>
In
PageLoad function write the below Code.
$(document).ready(function () {
$("#btnExport").click(function () {
$("#myTable").battatech_excelexport({
containerid: "myTable"
, datatype: 'table'
});
});
});
Here,btnExport is my button ID and myTable is
my Table ID.
Please find the entire code snippet as below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
table, td, th {
border: 1px solid green;
}
th {
background-color: green;
color: white;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="JS/jquery.battatech.excelexport.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnExport").click(function () {
$("#myTable").battatech_excelexport({
containerid: "myTable"
, datatype: 'table'
});
});
});
</script>
</head>
<body>
<input type="button" id="btnExport" value="Export To Excel" />
<br />
<table id="myTable" cellspacing='0' cellpadding='0'>
<thead>
<tr>
<th>Title</th>
<th>Employee</th>
<th>Company</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>SE</td>
<td>Karthik</td>
<td>Microsoft</td>
<td>Delivery</td>
</tr>
<tr>
<td>SE</td>
<td>Karthik</td>
<td>Microsoft</td>
<td>Delivery</td>
</tr>
<tr>
<td>SE</td>
<td>Karthik</td>
<td>Microsoft</td>
<td>Delivery</td>
</tr>
<tr>
<td>SE</td>
<td>Karthik</td>
<td>Microsoft</td>
<td>Delivery</td>
</tr>
</tbody>
</table>
</body>
We can see the final out put as follows,
You can download the JS file and HTML file from the below link.
https://sites.google.com/site/sharepointkitchenblog/Export.zip
Thanks..
0 comments:
Post a Comment