If you want to Export HTML Table Data to Excel file using javascript for offline use. You can quickly do it with my javascript source code. I have provided a general script to use multiple times. This script is explained with a simple example. But you can easily implement it with any type of HTML table.
Exporting HTML Table to Excel is the most popular & common feature. Every Web application needs this feature to export the largest table data to excel format. Even It will work with dynamic table data coming from the database.
Contents
How to Export HTML Table Data to Excel
I’m going to learn you how to export HTML table data to excel using javascript. But before starting the next steps, You should have knowledge of basic HTML. Even Excel software must be installed on your computer. So that you will be able to open the downloaded excel file.
You can convert & download HTML Table data to excel formate by clicking an HTML button. Whenever you click the HTML button, Table data will begin to download automatically on your computer. After a few seconds, downloading will be finished. Then you can view & edit table data in excel file.
Read Also
Convert HTML to PDF Using javaScript
Create javaScript Accordion Using JavaScript
Now, configure the following steps. It is very simple to understand & learn.
1. Create HTML Table With Data
Create an HTML table with a few data. Even declare table id="tableData" within opening HTML tag. Table id will be used to access for exporting its data using javascript.
Also, create an HTML button with id="export" . This button will be used to execute javascript code exporting table tada.
<button id="export">Export Now</button>
<table id="tableData" border="1" cellpadding="5" cellspacing="0">
<tr>
<th>S.N</th>
<th>Full Name</th>
<th>Gender</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>1</td>
<td>Noor Khan</td>
<td>Male</td>
<td>25</td>
<td>Patna</td>
</tr>
<tr>
<td>2</td>
<td>Sunil Kumar</td>
<td>Male</td>
<td>24</td>
<td>Chennai</td>
</tr>
<tr>
<td>3</td>
<td>Monika Kumari</td>
<td>Female</td>
<td>20</td>
<td>Noida</td>
</tr>
<tr>
<td>4</td>
<td>Ayush Aryan</td>
<td>Male</td>
<td>26</td>
<td>Patna</td>
</tr>
<tr>
<td>5</td>
<td>Avaneesh Mishra</td>
<td>Male</td>
<td>25</td>
<td>New Delhi</td>
</tr>
</table>
2. Export HTML Table Data to Excel using Javascript
You have to do the following works for exporting HTML table data to excel.
- Select the HTML button through its id and create
onclickfunction with it. - Get the value of the table
idand store it in a variabletableId. - call custom function
htmlTableToExcel(tableId, filename = '')and pass the value of the table idtableIdor filename as a parameter. This function will convert Table data to excel on the HTML button click.
<script type="text/javascript" >
document.getElementById('export').onclick=function(){
var tableId= document.getElementById('tableData').id;
htmlTableToExcel(tableId, filename = '');
}
var htmlTableToExcel= function(tableId, fileName = ''){
var downloadedFileName='excel_table_data';
var TableDataType = 'application/vnd.ms-excel';
var selectTable = document.getElementById(tableId);
var htmlTable = selectTable.outerHTML.replace(/ /g, '%20');
filename = filename?filename+'.xls':downloadedFileName+'.xls';
var downloadingURL = document.createElement("a");
document.body.appendChild(downloadingURL);
if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['\ufeff', htmlTable], {
type: TableDataType
});
navigator.msSaveOrOpenBlob( blob, fileName);
}else{
downloadingURL.href = 'data:' + TableDataType + ', ' + htmlTable;
downloadingURL.download = fileName;
downloadingURL.click();
}
}
</script>
3. Use the Complete Source Code in your Project
Now, You can use the following complete source code directly in your project.
<!DOCTYPE html>
<html>
<head>
<title>Export html Table Data to Excel Using javaScript</title>
</head>
<body>
<br><br>
<button id="export">Export Now</button>
<br><br>
<table id="tableData" border="1" cellpadding="5" cellspacing="0">
<tr>
<th>S.N</th>
<th>Full Name</th>
<th>Gender</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>1</td>
<td>Noor Khan</td>
<td>Male</td>
<td>25</td>
<td>Patna</td>
</tr>
<tr>
<td>2</td>
<td>Sunil Kumar</td>
<td>Male</td>
<td>24</td>
<td>Chennai</td>
</tr>
<tr>
<td>3</td>
<td>Monika Kumari</td>
<td>Female</td>
<td>20</td>
<td>Noida</td>
</tr>
<tr>
<td>4</td>
<td>Ayush Aryan</td>
<td>Male</td>
<td>26</td>
<td>Patna</td>
</tr>
<tr>
<td>5</td>
<td>Avaneesh Mishra</td>
<td>Male</td>
<td>25</td>
<td>New Delhi</td>
</tr>
</table>
<script type="text/javascript" >
document.getElementById('export').onclick=function(){
var tableId= document.getElementById('tableData').id;
htmlTableToExcel(tableId, filename = '');
}
var htmlTableToExcel= function(tableId, fileName = ''){
var downloadedFileName='excel_table_data';
var TableDataType = 'application/vnd.ms-excel';
var selectTable = document.getElementById(tableId);
var htmlTable = selectTable.outerHTML.replace(/ /g, '%20');
filename = filename?filename+'.xls':downloadedFileName+'.xls';
var downloadingURL = document.createElement("a");
document.body.appendChild(downloadingURL);
if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['\ufeff', htmlTable], {
type: TableDataType
});
navigator.msSaveOrOpenBlob( blob, fileName);
}else{
downloadingURL.href = 'data:' + TableDataType + ', ' + htmlTable;
downloadingURL.download = fileName;
downloadingURL.click();
}
}
</script>
</body>
</html>
Suggestion
Dear Developer, I hope you have understood the above javascript code. Now, you are able to quickly export another largest & complex table data. If you like my tutorials, share it with your friends.
If you have any queries or suggestions related to web development coding. you can ask me through the comment box. I will definitely reply as soon as possible.
Leave a Reply