Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Convert a HTML Table into Excel Spreadsheet using jQuery?
Converting an HTML table to an Excel spreadsheet can be accomplished using the table2excel jQuery plugin. This lightweight plugin provides a simple solution for exporting table data to Excel format with minimal setup. The plugin works by targeting HTML <table> elements and converting their content into downloadable Excel files.
Syntax
Following is the basic syntax for the table2excel plugin
$(selector).table2excel({
filename: "filename",
fileext: ".xls"
});
Where
selector Any HTML table element, class, or ID that identifies the table to export.
filename The desired name for the exported Excel file (without extension).
fileext The file extension, typically ".xls" or ".xlsx".
Required Dependencies
To use the table2excel functionality, you need to include the following CDN links in your HTML document
jQuery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
table2excel plugin
<script src="https://cdn.jsdelivr.net/gh/rainabba/jquery-table2excel@1.1.0/dist/jquery.table2excel.min.js"></script>
Basic Implementation Steps
Follow these steps to implement table to Excel conversion
Step 1 Create an HTML table with proper structure using
<table>,<tr>, and<td>tags.Step 2 Add a button element that will trigger the export functionality.
Step 3 Include jQuery and table2excel CDN links in the document head.
Step 4 Write JavaScript code to handle the button click event and call the table2excel function.
Step 5 Configure the export options including filename and file extension.
Basic Example
Following example demonstrates converting a student records table to Excel format
<!DOCTYPE html>
<html>
<head>
<title>Convert HTML Table to Excel</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/rainabba/jquery-table2excel@1.1.0/dist/jquery.table2excel.min.js"></script>
<style>
table { border-collapse: collapse; margin: 20px 0; }
th, td { border: 1px solid #ccc; padding: 8px; text-align: center; }
th { background-color: #f4f4f4; font-weight: bold; }
button { margin-top: 15px; padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Student Records</h2>
<table id="studentsTable">
<tr>
<th>S.No.</th>
<th>Student Name</th>
<th>Branch</th>
<th>Roll No.</th>
<th>Date of Birth</th>
</tr>
<tr>
<td>1</td>
<td>Arman Kumar</td>
<td>Computer Science</td>
<td>CS001</td>
<td>15/01/2000</td>
</tr>
<tr>
<td>2</td>
<td>Ayush Sharma</td>
<td>Civil Engineering</td>
<td>CE002</td>
<td>22/03/2000</td>
</tr>
<tr>
<td>3</td>
<td>Abhay Singh</td>
<td>Electrical Engineering</td>
<td>EE003</td>
<td>10/07/2001</td>
</tr>
<tr>
<td>4</td>
<td>Akshay Patel</td>
<td>Information Technology</td>
<td>IT004</td>
<td>05/12/1999</td>
</tr>
</table>
<button id="exportBtn">Export to Excel</button>
<script>
$('#exportBtn').click(function() {
$('#studentsTable').table2excel({
filename: "StudentRecords",
fileext: ".xls"
});
$(this).text("Exported Successfully!");
setTimeout(() => { $(this).text("Export to Excel"); }, 2000);
});
</script>
</body>
</html>
When the "Export to Excel" button is clicked, the table data is converted and downloaded as an Excel file named "StudentRecords.xls".
Advanced Configuration Options
The table2excel plugin supports additional parameters for customizing the export behavior
$(selector).table2excel({
filename: "myFile",
fileext: ".xls",
preserveColors: true,
exclude_img: true,
exclude_links: true,
exclude_inputs: true
});
Configuration Parameters
preserveColors When set to
true, preserves background colors and font colors from the HTML table.exclude_img When set to
true, excludes images from the exported Excel file.exclude_links When set to
true, excludes hyperlinks and only exports the link text.exclude_inputs When set to
true, excludes input field values from the export.
Example with Advanced Options
Following example demonstrates using advanced configuration options
<!DOCTYPE html>
<html>
<head>
<title>Advanced Table Export</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/rainabba/jquery-table2excel@1.1.0/dist/jquery.table2excel.min.js"></script>
<style>
table { border-collapse: collapse; margin: 20px 0; }
th, td { border: 1px solid #ddd; padding: 10px; }
.highlight { background-color: #ffffcc; }
.important { background-color: #ffcccc; font-weight: bold; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Sales Report</h2>
<table id="salesTable">
<tr class="important">
<th>Product</th>
<th>Sales</th>
<th>Profit</th>
<th>Website</th>
</tr>
<tr>
<td>Laptop</td>
<td class="highlight">$25,000</td>
<td>$5,000</td>
<td><a href="https://example.com">View Details</a></td>
</tr>
<tr>
<td>Mobile</td>
<td class="highlight">$15,000</td>
<td>$3,000</td>
<td><a href="https://example.com">View Details</a></td>
</tr>
</table>
<button onclick="exportWithColors()">Export with Colors</button>
<button onclick="exportSimple()">Export Simple</button>
<script>
function exportWithColors() {
$('#salesTable').table2excel({
filename: "SalesReport_WithColors",
fileext: ".xls",
preserveColors: true,
exclude_links: false
});
}
function exportSimple() {
$('#salesTable').table2excel({
filename: "SalesReport_Simple",
fileext: ".xls",
preserveColors: false,
exclude_links: true
});
}
</script>
</body>
</html>
This example provides two export options: one that preserves colors and links, and another that exports a simple version without formatting.
Multiple Table Export
You can also export multiple tables or specific portions of tables using different selectors
// Export specific table by ID
$('#table1').table2excel({filename: "Table1Data", fileext: ".xls"});
// Export all tables with a specific class
$('.export-table').table2excel({filename: "AllTables", fileext: ".xls"});
// Export table rows with specific class only
$('#myTable tr.export-row').table2excel({filename: "SelectedRows", fileext: ".xls"});
3K+ Views
