CodingStatus

- Learn Coding to Build Web Applications

Export HTML Table Data to Excel File Using javaScript

By 6 Comments

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.

export html table data to excel using javascript

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  onclick function with it.
  • Get the value of the table id and store it in a variable tableId.
  • call custom function htmlTableToExcel(tableId, filename = '') and pass the value of the table id tableId or 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.

Related Posts:

Filed Under: JavaScript

Reader Interactions

Comments

  1. Deena says

    Hello, I desire to subscribe for this web site to take newest updates, so where
    can i do it please help out.

    Reply

  3. Vishnoo Rath says

    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

    Reply

Leave a Reply

Your email address will not be published.