How to Convert HTML to Excel using table2excel
Hello, web developers! In this article, we'll see how to convert HTML to Excel using table2excel, Here, we'll export the HTML table to Excel in jQuery. Here, we'll use the table2excel jQuery plugin to export or download Excel files from the HTML table.
Also, you can install it in multiple ways, like Bower, CDN file, etc.
Convert HTML to Excel using table2excel
Install Bower
You can install using Bower
npm install -g bower
Install jquery-table2excel and dependencies.
bower install jquery-table2excel --save
Include jQuery and table2excel in your page.
<script src="bower_components\jquery\dist\jquery.min.js"></script>
<script src="bower_components\jquery-table2excel\dist\jquery.table2excel.min.js"></script>
using CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>
Using the plugin
$("#test").table2excel({
exclude: ".excludeThisClass",
name: "demo",
filename: "demo.xls",
preserveColors: false // set to true if you want background colors and font colors preserved
});
Example 1:
In this example, we'll create an HTML table and add an export button to download the excel file.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Boilerplate</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="../dist/jquery.table2excel.js"></script>
</head>
<body>
<table class="table2excel" data-tableName="Test Table 1">
<thead>
<tr class="noExl"><td>This shouldn't get exported</td><td>This shouldn't get exported either</td></tr>
<tr><td>This Should get exported as a header</td><td>This should too</td></tr>
</thead>
<tbody>
<tr>
<td style="background-color: blue; color: purple;">data1a with a <a href="#">link one</a> and <a href="#">link two</a> and color won't be exported.</td>
<td>data1b with a <img src="image_file.jpg" alt="image">.</td></tr>
<tr>
<td>data2a with a <input tyle="text" value="text value">.</td>
<td>data2b with a <input tyle="text" value="second text value">.</td>
</tr>
</tbody>
<tfoot>
<tr><td colspan="2">This footer spans 2 cells</td></tr>
</tfoot>
</table>
<button class="exportToExcel">Export to XLS</button>
<table class="table2excel" data-tableName="Test Table 2">
<thead>
<tr class="noExl"><td>This shouldn't get exported</td><td>This shouldn't get exported either</td></tr>
<tr><td>This Should get exported as a header</td><td>This should too</td></tr>
</thead>
<tbody>
<tr><td>data1a</td><td>data1b</td></tr>
<tr><td>data2a</td><td>data2b</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">This footer spans 2 cells</td></tr>
</tfoot>
</table>
<button class="exportToExcel">Export to XLS</button>
<table class="table2excel table2excel_with_colors" data-tableName="Test Table 3">
<thead>
<tr class="noExl"><td>This shouldn't get exported</td><td>This shouldn't get exported either</td></tr>
<tr><td style="background-color: green;">This Should get exported as a header and maintain background color</td><td>This should too</td></tr>
</thead>
<tbody>
<tr><td style="background-color: green; color: red;">data1a</td><td>data1b</td></tr>
<tr><td>data2a</td><td>data2b</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">This footer spans 2 cells</td></tr>
</tfoot>
</table>
<button class="exportToExcel">Export to XLS</button>
<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>
</body>
</html>
Example 2:
In this example, we'll create simple HTML table and download excel file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>How to Convert HTML to Excel using table2excel - Techsolutionstuff</title>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js">
</script>
<!-- table2excel jQuery plugin CDN -->
<script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js">
</script>
<style>
#downloadBtn{
background-color: green;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
margin: 2rem 0;
cursor: pointer;
}
</style>
</head>
<body>
<center>
<table id="userTable" border="1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Dell</td>
<td>dell@example.com</td>
<td>9876543210</td>
</tr>
<tr>
<td>2</td>
<td>HP</td>
<td>hp@example.com</td>
<td>4567891230</td>
</tr>
<tr>
<td>3</td>
<td>Apple</td>
<td>apple@example.com</td>
<td>1234567890</td>
</tr>
<tr>
<td>4</td>
<td>Acer</td>
<td>acer@example.com</td>
<td>1234567890</td>
</tr>
</tbody>
</table>
<button id="downloadBtn">Download Excel</button>
</center>
<script>
$(document).ready(function () {
$('#downloadBtn').on('click', function () {
$("#userTable").table2excel({
filename: "users.xls"
});
});
});
</script>
</body>
</html>
You might also like:
- Read Also: How to Convert HTML to Excel File using jQuery
- Read Also: Laravel 10 Import Export CSV And EXCEL File
- Read Also: Laravel 10 Import and Export File using Fast Excel
- Read Also: How to Export CSV Files in Node.js using json2csv
