How to Convert HTML Table into Excel Spreadsheet using jQuery ?
Last Updated :
08 Aug, 2024
In this article, we will learn how we can convert an HTML table into an Excel spreadsheet using jQuery. There are two ways available in jQuery to accomplish this task as discussed below:
Approach 1: Using the jQuery table2excel plugin
A simple jQuery plugin 'table2excel' can be used for converting an HTML table to an Excel sheet. You need to add the below CDN link of the table2excel plugin into your HTML document to use it.
CDN Link:
<!-- table2excel plugin CDN -->
<script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js">
</script>
Syntax:
$("#table-id").table2excel({
filename: "excel_sheet-name.xls"
});Example: The below example will explain the use of the table2excel jQuery plugin to convert an HTML table into an Excel sheet.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,
initial-scale=1.0">
<title>Table to Excel</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>
#dwnldBtn{
background-color: green;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
margin: 2rem 0;
cursor: pointer;
}
</style>
</head>
<body>
<center>
<table id="dataTable" border="1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>12345</td>
<td>Samyuj Kumar</td>
<td>[email protected]</td>
<td>123-456-7890</td>
</tr>
<tr>
<td>12346</td>
<td>Sanjay Dhillon</td>
<td>[email protected]</td>
<td>012-345-6789</td>
</tr>
<tr>
<td>12347</td>
<td>Johan Greg</td>
<td>[email protected]</td>
<td>987-654-3210</td>
</tr>
</tbody>
</table>
<button id="dwnldBtn">
Download Excel Sheet
</button>
</center>
<script>
$(document).ready(function () {
$('#dwnldBtn').on('click', function () {
$("#dataTable").table2excel({
filename: "employeeData.xls"
});
});
});
</script>
</body>
</html>
Output:
In this method, a link can be generated to download the file in the excel format which converts the HTML table into excel sheet.
Example: The below example will explain how you can create a download link in the excel format using jQuery.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,
initial-scale=1.0">
<title>Table to Excel</title>
<!-- jQuery CDN -->
<script src=
"https://code.jquery.com/jquery-3.6.4.min.js">
</script>
<style>
#dwnldBtn{
background-color: green;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
margin: 2rem 0;
cursor: pointer;
}
</style>
</head>
<body>
<center>
<table id="dataTable" border="1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>12345</td>
<td>Samyuj Kumar</td>
<td>[email protected]</td>
<td>123-456-7890</td>
</tr>
<tr>
<td>12346</td>
<td>Sanjay Dhillon</td>
<td>[email protected]</td>
<td>012-345-6789</td>
</tr>
<tr>
<td>12347</td>
<td>Johan Greg</td>
<td>[email protected]</td>
<td>987-654-3210</td>
</tr>
</tbody>
</table>
<button id="dwnldBtn">
Download Excel Sheet
</button>
</center>
<script>
$(document).ready(function () {
$('#dwnldBtn').on('click', function () {
downloadExcelTable('dataTable', 'employeeData');
});
function downloadExcelTable(tableID, filename = '') {
const linkToDownloadFile = document.
createElement("a");
const fileType = 'application/vnd.ms-excel';
const selectedTable = document.
getElementById(tableID);
const selectedTableHTML = selectedTable.outerHTML.
replace(/ /g, '%20');
filename = filename ? filename + '.xls' :
'excel_data.xls';
document.body.appendChild(linkToDownloadFile);
if (navigator.msSaveOrOpenBlob) {
const myBlob = new Blob(['\ufeff',
selectedTableHTML], {
type: fileType
});
navigator.msSaveOrOpenBlob(myBlob, filename);
} else {
// Create a link to download
// the excel the file
linkToDownloadFile.href = 'data:' + fileType +
', ' + selectedTableHTML;
// Setting the name of
// the downloaded file
linkToDownloadFile.download = filename;
// Clicking the download link
// on click to the button
linkToDownloadFile.click();
}
}
});
</script>
</body>
</html>
Output:
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps. jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it's philosophy of “Write less, do more".
Similar Reads
How to convert JSON data to a html table using JavaScript/jQuery ? To convert JSON data into an HTML table, there are multiple approaches, each of which has its own strengths. Let's walk through both approaches you mentioned, detailing how each one works.Table of ContentUsing for loopUsing JSON.stringify() MethodApproach 1: Using for loopTake the JSON Object in a v
4 min read
How to select all even/odd rows in table using jQuery ? In this article, we will see how to make a table by selecting the alternate rows i.e. selecting the even or odd rows by clicking on the respective buttons. This feature can be useful at the time of selecting the specific data/elements of either of the rows or to highlight the table of data for displ
3 min read
How to add table row in a table using jQuery? In jQuery, adding a row to a table refers to dynamically inserting a new table row (<tr>) into an existing HTML table. This functionality allows developers to update and manage table content in real-time, enhancing interactivity and user experience without reloading the page.Steps to add table
2 min read
How to fetch data from JSON file and display in HTML table using jQuery ? The task is to fetch data from the given JSON file and convert data into an HTML table. Approach: We have a JSON file containing data in the form of an array of objects. In our code, we are using jQuery to complete our task. The jQuery code uses getJSON() method to fetch the data from the file's loc
3 min read
How to create a Zebra Stripes table effect using jQuery ? Given an HTML document with a table and the task is to create a Zebra Stripes table effect on the table using jQuery. Approach : To achieve the Zebra Stripes table effect, use the below code snippet: $(function() { $("table tr:nth-child(odd)").addClass("zebrastripe"); }); In the above function, zebr
2 min read
How to highlight alternate table row using jQuery ? In this article, we will set the highlight on an alternative table row using jQuery. The :nth-child(2n) selector is used to select the alternative row and the addClass() method is used to set the style of the alternative rows. Syntax: $(tr:nth-child(2n)").addClass("GFG"); Here, we will create a simp
2 min read
How to Convert HTML Table to JSON in JavaScript? HTML tables are commonly used to present structured data on websites. In many scenarios, this tabular data needs to be converted to JSON format for processing, storage, or server communication. We will discuss different approaches to converting HTML tables to JSON using JavaScript.These are the foll
3 min read
How to Create Header Cell in a Table using HTML? A header cell in a table made with <th> tag is used to label columns or rows, helping organize information. To create a header cell in an HTML table, use the <th> element. Header cells typically contain titles for each column or row, and they are bold by default.Syntax<th> Contents
1 min read
How to Create Time-Table Schedule using HTML? A time table or schedule is essential for organizing tasks, events, or classes. We’ll create a basic time-table layout using HTML. A Table is an arrangement of rows and columns. Anyone can create a table by knowing the basics of HTML(HyperText Markup Language). In HTML we can use the <table> t
3 min read
How to export HTML table to CSV using JavaScript ? Comma Separated Values or CSV is a type of text file where each value is delimited by a comma. CSV files are very useful for the import and export of data to other software applications.Sometimes while developing web applications, you may come into a scenario where you need to download a CSV file co
6 min read