Today, We want to share with you javascript export to excel.In this post we will show you export html table to excel using javascript, hear for exporting html table to excel we will give you demo and example for implement.In this post, we will learn about export to excel in php with an example.

Export HTML Table Data to Excel using JavaScript

Contents

PHP Split Export convert Multiple Excel Sheet Files

HTMl Table Data:

Export HTML Table Data to Excel
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>rakhiba</td>
        <td>[email protected]</td>
        <td>26</td>
         <td>8888888888</td>
    </tr>
    <tr>
        <td>swati</td>
        <td>[email protected]</td>
         <td>24</td>
         <td>8888888888</td>
    </tr>
    <tr>
        <td>mayurshinh</td>
        <td>[email protected]</td>
         <td>36</td>
         <td>8888888888</td>
    </tr>
<tr>
        <td>Virat</td>
        <td>[email protected]</td>
         <td>28</td>
         <td>8888888888</td>
    </tr>
</table>

JavaScript Code:

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



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

</script>

Complete Code:

Example : index.html

<html>
<head>
<title>Export HTML Table Data to Excel using JavaScript | www.pakainfo.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<script type="text/javascript">
function dataContentExportExl(memberId, filename = ''){
    var fourceFileSaveDataUrl;
    var dataFileType = 'application/vnd.ms-excel';
    var tableSelect = document.getElementById(memberId);
    var dataContentSource = tableSelect.outerHTML.replace(/ /g, '%20');
    
    // Specify file name
    filename = filename?filename+'.xls':'export_excel_data.xls';
    
    // Create download link element
    fourceFileSaveDataUrl = document.createElement("a");
    
    document.body.appendChild(fourceFileSaveDataUrl);
    
    if(navigator.msSaveOrOpenBlob){
        var blob = new Blob(['\ufeff', dataContentSource], {
            type: dataFileType
        });
        navigator.msSaveOrOpenBlob( blob, filename);
    }else{
        // Create a link to the file
        fourceFileSaveDataUrl.href = 'data:' + dataFileType + ', ' + dataContentSource;
    
        // Setting the file name
        fourceFileSaveDataUrl.download = filename;
        
        //triggering the function
        fourceFileSaveDataUrl.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>rakhiba</td>
        <td>[email protected]</td>
        <td>26</td>
         <td>8888888888</td>
    </tr>
    <tr>
        <td>swati</td>
        <td>[email protected]</td>
         <td>24</td>
         <td>8888888888</td>
    </tr>
    <tr>
        <td>mayurshinh</td>
        <td>[email protected]</td>
         <td>36</td>
         <td>8888888888</td>
    </tr>
<tr>
        <td>Virat</td>
        <td>[email protected]</td>
         <td>28</td>
         <td>8888888888</td>
    </tr>
	 </tbody>
</table>
 
<button onclick="dataContentExportExl('tblexportData', 'user-data')" class="btn btn-success">Export Table Data To Excel File</button>
</div>
</body>
</html>

I hope you get an idea about js export table to excel.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Export HTML Table Data to Excel using JavaScript

HTMl Table Data:

JavaScript Code:

Complete Code:

Related posts: