Export HTML Table to Excel

Kailash Chandra Behera | Tuesday, May 26, 2020

Introduction

In this blog we are going to discuss how to Export HTML Table to Excel from the HTML web page (from HTML table) to an excel sheet using javascript code. This is applicable to any web application like ASP.NET, MVC, etc. which uses HTML elements to present data on the web page.

Getting Started

Here in this Export HTML Table to Excel, we are going to discuss the codes which will export data from HTML table to excel is simple JavaScript code where we will download an excel file with help of JavaScript code and the JavaScript codes even eligible to capture the background, foreground color and border style of a table row or table cell.

You will not believe that only two steps of codes will help us to export data to excel. The fist will create the object of the HTML table, which data will be exported. Then we will create an anchor element at runtime, with the help of the anchor element will download an excel file.

Let us say you have already written to display student details data in table structure like below image and you want to export those table structured data into excel sheet.

export html table to excel with css using jquery

Export HTML Table to Excel

We will fist provide an id to table which data we will export to excel. It will help us to create an object of the table using HTML DOM, then will create an HTML anchor element at runtime where we will pass HTML table content as a parameter. See the below code for more details.

 //Providing ID to HTML Table  
 <table border="1px solid black;" style="border-collapse:collapse;" id="printTable">  
 // Create download link element   
  downloadurl = document.createElement("a");   
  document.body.appendChild(downloadurl);   
  downloadurl.href = 'data:' + dataFileType + ', ' + tableHTMLData;   
  downloadurl.download = filename;   
  downloadurl.click();

Copy the below JavaScript codes and past inside your HTML file or any other file like JavaScript file, where you think that is appropriate place. 

 <script type="text/javascript">   
  function exportToExcel(){   
    var downloadurl;   
    var dataFileType = 'application/vnd.ms-excel';   
    var tableSelect = document.getElementById('printTable');   
    var tableHTMLData = tableSelect.outerHTML.replace(/ /g, '%20');   
   // Specify file name   
   filename = 'StudentDetails.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>

Declare an HTML button in the HTML wherever you think appropriate place and in the click event of the button, call the above function name. Here I have declared the button just below the HTML table. See the below image for more clarification.

export html table to excel with css using jquery

Export HTML Table to Excel

Now you are done with code, run your application, and verify the download. If you are still facing any problem, try the below code which contains full code to export data. 

 <HTML>  
 <HEAD>  
 <TITLE>  
 Print html table  
 </TITLE>  
 <script type="text/javascript">  
 function exportToExcel(){  
   var downloadurl;  
   var dataFileType = 'application/vnd.ms-excel';  
   var tableSelect = document.getElementById('printTable');  
   var tableHTMLData = tableSelect.outerHTML.replace(/ /g, '%20');  
   // Specify file name  
   filename = 'StudentDetails.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>  
 <table border="1px solid black;" style="border-collapse:collapse;" id="printTable">  
      <tbody><tr>  
           <th bgcolor="NAVY" style="padding:5px"><font color="white"> Student Name</font></th>  
           <th bgcolor="NAVY" style="padding:5px"><font color="white">Roll No.</font></th>  
           <th bgcolor="NAVY" style="padding:5px"><font color="white">DIV</font></th>  
           <th bgcolor="NAVY" style="padding:5px"><font color="white">STD</font></th>       
           <th bgcolor="NAVY" style="padding:5px"><font color="white">GRNO</font></th>            
           <th bgcolor="NAVY" style="padding:5px"><font color="white">Card No.</font></th>  
      </tr>  
 <TR><TD >Kailash</TD><TD>1</TD><TD>A</TD><TD>VII</TD><TD>102751</TD><TD>0005717471</TD></TR>  
 <TR><TD>Panchanan</TD><TD>2</TD><TD>B</TD><TD>VII</TD><TD>102752</TD><TD>0005717472</TD></TR>  
 <TR><TD>Sanjay</TD><TD>3</TD><TD>C</TD><TD>VII</TD><TD>102753</TD><TD>0005717473</TD></TR>  
 <TR><TD>Duti Krishna</TD><TD>4</TD><TD>D</TD><TD>VII</TD><TD>102754</TD><TD>0005717474</TD></TR>  
 <TR><TD>Ganesh</TD><TD>5</TD><TD>A</TD><TD>VII</TD><TD>102755</TD><TD>0005717475</TD></TR>  
 <TR><TD>Hrushi</TD><TD>6</TD><TD>B</TD><TD>VII</TD><TD>102756</TD><TD>0005717476</TD></TR>  
 <TR><TD>Samir</TD><TD>7</TD><TD>C</TD><TD>VII</TD><TD>102757</TD><TD>0005717477</TD></TR>  
 <TR><TD>Radhika</TD><TD>8</TD><TD>D</TD><TD>VII</TD><TD>10278</TD><TD>0005717478</TD></TR>  
 <TR><TD>Krishna</TD><TD>9</TD><TD>A</TD><TD>VII</TD><TD>102759</TD><TD>0005717470</TD></TR>  
 <TR><TD>Nilanchal</TD><TD>10</TD><TD>B</TD><TD>VII</TD><TD>102760</TD><TD>0005717480</TD></TR>  
 </tbody></table>  
 <br />  
 <button onclick="exportToExcel()">Export To Excel</button>  
 </BODY>  
 </HTML>

Related Articles

  1. Export DataTable To Excel in C#
  2. Export to Excel in MVC
  3. Export Table Data into XML in SQL
  4. Validating Excel Sheet in C#
  5. Import Excel in C#
  6. Creating controller for File Upload
  7. Reading Excel file in AngularJS
  8. Import XML into SQL Table

Summary

In the blog Export HTML Table to Excel using JavaScript, we have discussed how to export HTML table data into excel file using simple JavaScipt Code. I hope you enjoyed it.

Thanks

By at