Export HTML Table Data to Excel using JavaScript

Exporting data to Excel is very useful for every enterprise on data list web application. Every time , export data using custom export feature helps to download table data list for offline use as excel file like csv format. As a web Developer, I was required to do that in various live project. Excel format for exporting data in file is ideal in every enterprises. Mostly we used server-side method to export data to excel using php. But if you want to download table data to excel using client-side view then it can be easily done using javascript.

Looking for assistance with Excel assignments?

You should visit https://assignmentcore.com/excel-homework/ and get MS Excel homework help online from a team of experts.

In this tutorials, we will learn about how to export HTML table data to excel using client-side JavaScript. The Client-side export data functionality makes any web application more user-friendly. Using JavaScript, we can export or download HTML table data in excel format without page refresh.

Table of Contents

Export HTML Table Data to Excel

HTMl Table Data:
The Following below HTML Table contains some user data with some basic fields like Name, Email, Age, Mobile.



<table id="tblexportData">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Age</th>
        <th>Mobile</th>
    </tr>
    <tr>
        <td>Robert</td>
        <td>robert@gmail.com</td>
        <td>26</td>
         <td>9999999999</td>
    </tr>
    <tr>
        <td>Michael</td>
        <td>michael@gmail.com</td>
         <td>24</td>
         <td>9999999999</td>
    </tr>
    <tr>
        <td>Julie</td>
        <td>julie@gmail.com</td>
         <td>36</td>
         <td>9999999999</td>
    </tr>
<tr>
        <td>Trevor</td>
        <td>trevor@gmail.com</td>
         <td>28</td>
         <td>9999999999</td>
    </tr>
</table>

<tr>

<th>Email</th>

<th>Mobile</th>

</tr>

<tr>

<td>Robert</td>

<td>robert@gmail.com</td>

</tr>

<tr>

<td>Michael</td>

<td>michael@gmail.com</td>

</tr>

<tr>

<td>Julie</td>

<td>julie@gmail.com</td>

</tr>

<tr>

<td>Trevor</td>

<td>trevor@gmail.com</td>

</tr>

</table>

JavaScript Code:

The exportToExcel() function will use convert HTML table data to excel and download as xls file(.xls).



<script type="text/javascript">
function exportToExcel(tableID, filename = ''){
    var downloadurl;
    var dataFileType = 'application/vnd.ms-excel';
    var tableSelect = document.getElementById(tableID);
    var tableHTMLData = tableSelect.outerHTML.replace(/ /g, '%20');
    
    // Specify file name
    filename = filename?filename+'.xls':'export_excel_data.xls';
    
    // Create download link element
    downloadurl = document.createElement("a");
    
    document.body.appendChild(downloadurl);
    
    if(navigator.msSaveOrOpenBlob){
        var blob = new Blob(['\ufeff', tableHTMLData], {
            type: dataFileType
        });
        navigator.msSaveOrOpenBlob( blob, filename);
    }else{
        // Create a link to the file
        downloadurl.href = 'data:' + dataFileType + ', ' + tableHTMLData;
    
        // Setting the file name
        downloadurl.download = filename;
        
        //triggering the function
        downloadurl.click();
    }
}

</script>

function exportToExcel(tableID, filename = ''){

var downloadurl;

var dataFileType = 'application/vnd.ms-excel';

var tableSelect = document.getElementById(tableID);

var tableHTMLData = tableSelect.outerHTML.replace(/ /g, '%20');

// Specify file name

filename = filename?filename+'.xls':'export_excel_data.xls';

// Create download link element

downloadurl = document.createElement("a");

document.body.appendChild(downloadurl);

if(navigator.msSaveOrOpenBlob){

var blob = new Blob(['\ufeff', tableHTMLData], {

type: dataFileType

});

navigator.msSaveOrOpenBlob( blob, filename);

}else{

// Create a link to the file

downloadurl.href = 'data:' + dataFileType + ', ' + tableHTMLData;

// Setting the file name

downloadurl.download = filename;

//triggering the function

downloadurl.click();

}

</script>

tableID – Required. Specify the HTML table ID to export data from.
filename – Optional. Specify the file name to download excel data.



<button onclick="exportToExcel('tblexportData')">Export Table Data To Excel File</button>

<button onclick="exportToExcel('tblexportData')">Export Table Data To Excel File</button>

The above button triggers exportToExcel() function to download HTML table data using javascript

If you want to download or export data with custom file name then you can pass your file name in the exportToExcel() function, see below button code:



<button onclick="exportToExcel('tblexportData', 'user-data')">Export Table Data To Excel File</button>

<button onclick="exportToExcel('tblexportData', 'user-data')">Export Table Data To Excel File</button>

Complete Code:



<html>
<head>
<title>Export HTML Table Data to Excel using JavaScript | Tutorialswebsite</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<script type="text/javascript">
function exportToExcel(tableID, filename = ''){
    var downloadurl;
    var dataFileType = 'application/vnd.ms-excel';
    var tableSelect = document.getElementById(tableID);
    var tableHTMLData = tableSelect.outerHTML.replace(/ /g, '%20');
    
    // Specify file name
    filename = filename?filename+'.xls':'export_excel_data.xls';
    
    // Create download link element
    downloadurl = document.createElement("a");
    
    document.body.appendChild(downloadurl);
    
    if(navigator.msSaveOrOpenBlob){
        var blob = new Blob(['\ufeff', tableHTMLData], {
            type: dataFileType
        });
        navigator.msSaveOrOpenBlob( blob, filename);
    }else{
        // Create a link to the file
        downloadurl.href = 'data:' + dataFileType + ', ' + tableHTMLData;
    
        // Setting the file name
        downloadurl.download = filename;
        
        //triggering the function
        downloadurl.click();
    }
}
 
</script>
</head>
<body>
<div class="container">
<table id="tblexportData" class="table">
<thead>
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Age</th>
        <th>Mobile</th>
    </tr>
	</thead>
  <tbody>
    <tr>
        <td>Robert</td>
        <td>robert@gmail.com</td>
        <td>26</td>
         <td>9999999999</td>
    </tr>
    <tr>
        <td>Michael</td>
        <td>michael@gmail.com</td>
         <td>24</td>
         <td>9999999999</td>
    </tr>
    <tr>
        <td>Julie</td>
        <td>julie@gmail.com</td>
         <td>36</td>
         <td>9999999999</td>
    </tr>
<tr>
        <td>Trevor</td>
        <td>trevor@gmail.com</td>
         <td>28</td>
         <td>9999999999</td>
    </tr>
	 </tbody>
</table>

<button onclick="exportToExcel('tblexportData', 'user-data')" class="btn btn-success">Export Table Data To Excel File</button>
</div>
</body>
</html>

<html>

<head>

<title>Export HTML Table Data to Excel using JavaScript | Tutorialswebsite</title>

function exportToExcel(tableID, filename = ''){

var downloadurl;

var dataFileType = 'application/vnd.ms-excel';

var tableSelect = document.getElementById(tableID);

var tableHTMLData = tableSelect.outerHTML.replace(/ /g, '%20');

// Specify file name

filename = filename?filename+'.xls':'export_excel_data.xls';

// Create download link element

downloadurl = document.createElement("a");

document.body.appendChild(downloadurl);

if(navigator.msSaveOrOpenBlob){

var blob = new Blob(['\ufeff', tableHTMLData], {

type: dataFileType

});

navigator.msSaveOrOpenBlob( blob, filename);

}else{

// Create a link to the file

downloadurl.href = 'data:' + dataFileType + ', ' + tableHTMLData;

// Setting the file name

downloadurl.download = filename;

//triggering the function

downloadurl.click();

}

</script>

</head>

<body>

<thead>

<tr>

<th>Email</th>

<th>Mobile</th>

</tr>

</thead>

<tbody>

<tr>

<td>Robert</td>

<td>robert@gmail.com</td>

</tr>

<tr>

<td>Michael</td>

<td>michael@gmail.com</td>

</tr>

<tr>

<td>Julie</td>

<td>julie@gmail.com</td>

</tr>

<tr>

<td>Trevor</td>

<td>trevor@gmail.com</td>

</tr>

</tbody>

</table>

<button onclick="exportToExcel('tblexportData', 'user-data')" class="btn btn-success">Export Table Data To Excel File</button>

</div>

</body>

</html>

Conclusion

Our example code will help you to easily export the table data using minimal javascript code.

Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request

Pradeep Maurya

Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co