table2excel is a simple yet useful jQuery plugin which allows for exporting Html table data to an Excel file.
Live Demo
# | Column 1 | Column 2 | Column 3 |
---|---|---|---|
1 | Column 1.1 | Column 1.2 | Column 1.3 |
2 | Column 2.1 | Column 2.2 | Column 2.3 |
3 | Column 3.1 | Column 3.2 | Column 3.3 |
4 | Column 4.1 | Column 4.2 | Column 4.3 |
5 | Column 5.1 | Column 5.2 | Column 5.3 |
6 | Column 6.1 | Column 6.2 | Column 6.3 |
7 | Column 7.1 | Column 7.2 | Column 7.3 |
How to Use
1. CSS
Add the css below to your html page
<link rel="stylesheet" media="all" href="bootstrap4.min.css" />
2. HTML
Create a container where you want to render table
<table class="table table-striped table-bordered table2excel" data-tableName="Test Table 1">
<thead>
<tr class="noExl">
<th>#</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>Column 1.1</td>
<td>Column 1.2</td>
<td>Column 1.3</td>
</tr>
<tr>
<td>2</td>
<td>Column 2.1</td>
<td>Column 2.2</td>
<td>Column 2.3</td>
</tr>
<tr class="success">
<td>3</td>
<td>Column 3.1</td>
<td>Column 3.2</td>
<td>Column 3.3</td>
</tr>
<tr>
<td>4</td>
<td>Column 4.1</td>
<td>Column 4.2</td>
<td>Column 4.3</td>
</tr>
<tr class="info">
<td>5</td>
<td>Column 5.1</td>
<td>Column 5.2</td>
<td>Column 5.3</td>
</tr>
<tr>
<td>6</td>
<td>Column 6.1</td>
<td>Column 6.2</td>
<td>Column 6.3</td>
</tr>
<tr class="warning">
<td>7</td>
<td>Column 7.1</td>
<td>Column 7.2</td>
<td>Column 7.3</td>
</tr>
</tbody>
</table>
<button class="btn btn-info exportToExcel">Export to XLS</button>
3. Javascript
Load jQuery library together with the Export Html Table To Excel Spreadsheet library into your code
<script src="../dist/jquery.table2excel.min.js"></script>
<script>
$(function () {
$(".exportToExcel").click(function (e) {
var table = $(this).prev('.table2excel');
if (table && table.length) {
var preserveColors = (table.hasClass('table2excel_with_colors') ? true : false);
$(table).table2excel({
exclude: ".noExl",
name: "Excel Document Name",
filename: "myFileName" + new Date().toISOString().replace(/[\-\:\.]/g, "") +
".xls",
fileext: ".xls",
exclude_img: true,
exclude_links: true,
exclude_inputs: true,
preserveColors: preserveColors
});
}
});
});
</script>
Source Code
DownloadFor more Advanced Usages, please check the demo page or visit the official website.