Hi sureshMGR,
Check this example. Now please take its reference and correct your code.
For this i have used TableExport.js plugin. For more details refer below link and download required js and css file from the link.
https://tableexport.v3.travismclarke.com/
HTML
<table id="tblCustomers" class="table table-responsive">
<tr>
<th>Customer Id</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>1</td>
<td>John Hammond</td>
<td>United States</td>
</tr>
<tr>
<td>2</td>
<td>Mudassar Khan</td>
<td>India
</td>
</tr>
<tr>
<td>3</td>
<td>Suzanne Mathews</td>
<td>France</td>
</tr>
<tr>
<td>4</td>
<td>Robert Schidner</td>
<td>Russia</td>
</tr>
</table>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.3.13/css/tableexport.css" />
<script type="text/javascript" src="Blob.js"></script>
<script type="text/javascript" src="xlsx.core.min.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.3.13/js/tableexport.js"></script>
<script type="text/javascript">
$(function () {
var tables = $("#tblCustomers").tableExport({
bootstrap: true,
headings: true,
footers: true,
formats: ["xlsx", "xls", "csv", "txt"],
fileName: "MyExcel",
position: "top",
ignoreRows: null,
ignoreCols: null,
ignoreCSS: ".tableexport-ignore",
emptyCSS: ".tableexport-empty",
trimWhitespace: true
});
});
</script>
Screenshot
Exported files Type
Exported files
