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
What is HTML Table?
An HTML table is a group of rectangle cells that is used to store data in the form of rows & columns.
You can create an HTML table using the following elements –
- <table></table> – for creating a table
- <theader></theader> – to create a table header
- <tbody></tbody> – for creating a table body
- <tr></tr> – to create a table row
- <th></th> – to create a table heading
- <td></td> – for creating a table data/cell
- <tfooter></tfooter> – to create a table footer
What is Excel File?
Excel File is a spreadsheet that is created by Microsoft for different operating systems like Windows, Mac & Linux.
Using Excel File, You can easily calculate, edit, view, modify data. Even you can quickly manage & share the largest data in the form of a table.
Excel File has lots of features that help us to perform complex & largest tasks quickly. You can know more from its official website. To get the best information, you can search ‘excel’ on the google.
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.
You can convert HTML Table data to excel format by clicking an HTML button. Whenever you click the HTML button, Table data will begin to converted automatically on an excel file. After that, then you can view & edit table data in an excel file.
Read Also –
Convert HTML to PDF 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.
You must include an external javascript file custom.js in the following HTML file.
File Name – index.php
<!DOCTYPE html>
<html>
<body>
<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>
<script src="custom.js" type="text/javascript"></script>
</body>
</html>
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.
File Name – custom.js
document.getElementById('export').onclick=function(){
var tableId= document.getElementById('tableData').id;
htmlTableToExcel(tableId, filename = '');
}
var htmlTableToExcel= function(tableId, fileName = ''){
var excelFileName='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':excelFileName+'.xls';
var excelFileURL = document.createElement("a");
document.body.appendChild(excelFileURL);
if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['\ufeff', htmlTable], {
type: TableDataType
});
navigator.msSaveOrOpenBlob( blob, fileName);
}else{
excelFileURL.href = 'data:' + TableDataType + ', ' + htmlTable;
excelFileURL.download = fileName;
excelFileURL.click();
}
}
My 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 tutorial, 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.
Hello, I desire to subscribe for this web site to take newest updates, so where
can i do it please help out.
This feature will be integrated soon
Hello, I read your blogs regularly. Your writing style is witty, keep it up!
Beautiful code. Just some typos
filename = filename?filename+’.xls’:excelFileName+’.xls’; should be
fileName = fileName?fileName+’.xls’:excelFileName+’.xls’;
the N should be capital as the variable in the function is fileName
The code seems to work for me but the downloaded file is always named download.xls
can you please help
you can replace file name in this variable excelFileName=’excel_table_data’; according to you