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 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 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 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
How to create a table row using HTML? Define a row in a table by using a <tr> tag in a document. This tag is used to define a row in an HTML table. The tr element contains multiple th or td elements. Syntax:<tr> ... </tr>Example: In this example, a table row in HTML5, utilizes the <tr> tag within the <tbody
1 min read
How to group header content of a table using HTML5 ? In this article, we define to group the header content in a table by using the <th> tag in HTML to set the header cell of a table. Two types of cells in an HTML table. Header Cell: It is used to hold the header information. Standard Cell: It is used to hold the body of data. The working of bot
1 min read
How to merge table cells in HTML ? The purpose of this article is to explore the method of merging table cells in HTML using the rowspan and colspan attributes. By utilizing rowspan, multiple cells in a row can be merged or combined, while colspan enables the merging of cells in a column within an HTML table. This technique proves es
2 min read
How to create table cell using HTML5 ? In this article, we will create cell in a table by using a combination of <tr> and <td> tag in a HTML table. Syntax: <table> <tr> <td> . . . </td> <td> . . . </td> </tr> </table> Example: html <!DOCTYPE html> <html> <head>
1 min read