Showing data on the web in tabular is very common and most of the time user wants to save data.
The majority of user who plays with data are the user of Microsoft Excel so it's nice have a Download as .xls button on the page.
We can achieve this in many ways for example we can use some server side language to convert the database tables in excel format and so on.
But today we are going to do this via JavaScript.
Before i explain you further let me show you the code first.
Dummy HTML:
<div id="tableWrap">
<table>
<tbody>
<tr>
<th>Full Name</th>
<th>Profile</th>
<th>expertise</th>
</tr>
<tr>
<td>Aamir Khan</td>
<td>Full Stack Developer</td>
<td>Web & Security</td>
</tr>
<tr>
<td>Nitish Kumar</td>
<td>Marketing Manager</td>
<td>SEO</td>
</tr>
<tr>
<td>Sandeep Kumar</td>
<td>Web Developer</td>
<td>HTML, CSS & Jquery</td>
</tr>
</tbody>
</table>
</div>
Javascript Code:
let toXls = function(){
location.href='data:application/vnd.ms-excel,' + encodeURIComponent( document.getElementById("tableWrap").innerHTML);
return false;
};
The Above JS code is tricking the browser by using the
data:application/vnd.ms-excel to open the file with Microsoft Excel.and BOOM we are done .
Here is the complete Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Table to Excel.xls - Demo - chap09.blogspot.in </title>
<style>
html{
background-color:#fff;
color:#333;
font:0.75em/1.5 sans-serif;
padding:1em;
}
/* Tables */
table{
border-collapse: collapse;
margin-bottom:1em;
width:100%;
}
th{
background-color:#27ae60;
color:#fff;
font-weight:900;
}
th,
td{
border:1px solid #ccc;
padding:0.5em;
}
tr{
background: #F6F6F6;
}
tr:nth-of-type(odd){
background: #e9e9e9;
}
button{
background: #147246;
background-image: url("xls.png");
background-repeat: no-repeat;
background-size: 30%;
border-radius: 5px;
border: 0 none;
color: #fff;
cursor: pointer;
padding: 15px 50px;
}
</style>
</head>
<body>
<div id="tableWrap">
<table>
<tbody>
<tr>
<th>Full Name</th>
<th>Profile</th>
<th>expertise</th>
</tr>
<tr>
<td>Aamir Khan</td>
<td>Full Stack Developer</td>
<td>Web & Security</td>
</tr>
<tr>
<td>Nitish Kumar</td>
<td>Marketing Manager</td>
<td>SEO</td>
</tr>
<tr>
<td>Sandeep Kumar</td>
<td>Web Developer</td>
<td>HTML, CSS & Jquery</td>
</tr>
</tbody>
</table>
</div>
<p></p>
<button id="DownloadXls">Download</button>
<script>
document.getElementById('DownloadXls').onclick = function(){
location.href='data:application/vnd.ms-excel,' + encodeURIComponent( document.getElementById("tableWrap").innerHTML);
return false;
};
</script>
</body>
</html>
 |
| Proof of Concept |
No comments :
Post a Comment