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 |
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 |
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
- Export DataTable To Excel in C#
- Export to Excel in MVC
- Export Table Data into XML in SQL
- Validating Excel Sheet in C#
- Import Excel in C#
- Creating controller for File Upload
- Reading Excel file in AngularJS
- 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