<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test
Export</title>
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"
language="javascript">
</script>
<style type="text/css">
table
{
border:
1px solid black;
border-collapse:
collapse;
border-spacing:
0;
font-family:
Calibri;
font-size:
14px;
height:
120px;
width:
400px;
}
th
{
border:
1px solid black;
padding:
5px;
background-color:
grey;
color:
white;
}
td
{
text-align:
center;
border:
1px solid black;
}
</style>
</head>
<body>
<div>
<div id="dvData">
<table>
<tbody>
<tr>
<th>
Column One
</th>
<th>
Column Two
</th>
<th>
Column Three
</th>
</tr>
<tr>
<td>
row1 Col1
</td>
<td>
row1 Col2
</td>
<td>
row1 Col3
</td>
</tr>
<tr>
<td>
row2 Col1
</td>
<td>
row2 Col2
</td>
<td>
row2 Col3
</td>
</tr>
<tr>
<td>
row3 Col1
</td>
<td>
row3 Col2
</td>
<td>
row3 Col3
</td>
</tr>
</tbody>
</table>
</div>
<br/>
<input type="button" id="btnExport" value="Export Table data into Excel" />
</div>
</body>
</html>
<script type="text/javascript" language="javascript">
$("#btnExport").click(function (e) {
//first
method
// window.open('data:application/vnd.ms-excel,'
+ $('#dvData').html());
// e.preventDefault();
//second
method with css or style
window.open('data:application/vnd.ms-excel,'
+ encodeURIComponent($('#dvData').html()));
e.preventDefault();
});
</script>
No comments:
Post a Comment