Key Code:
Jquery Library with function
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#btnExpot').click(function () {
window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('div[id$=divContentToBePrint]').html()));
e.preventDefault();
});
})
</script>
Button which click event will call the jquery click event to export to excel
<input type="button" id="btnExpot" value="Print To Excel"/>
Div Content Which to Be exported to Ms Excel format.
<div id="divContentToBePrint">
<h3>Application Form</h3>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<td><input type="text" id="txtID" placeholder="Enter ID" title="Enter your ID" /></td>
<td><input type="text" id="txtName" placeholder="Enter Name" title="Enter your full name"/></td>
<td><input type="button" id="btnAdd" value="Add" title="click here for add new record"/></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>PABITRA</td>
<td>
<input type="button" id="btnEdit" value="Edit" title="click here for edit the record"/>
<input type="button" id="btnDelete" value="Delete" title="click here for delete the record"/>
</td>
</tr>
<tr>
<td>2</td>
<td>Microsoft</td>
<td>
<input type="button" id="Button3" value="Edit" title="click here for edit the record"/>
<input type="button" id="Button4" value="Delete" title="click here for delete the record"/>
</td>
</tr>
<tr>
<td>3</td>
<td>MS Sql Server</td>
<td>
<input type="button" id="Button1" value="Edit" title="click here for edit the record"/>
<input type="button" id="Button2" value="Delete" title="click here for delete the record"/>
</td>
</tr>
</tbody>
</table>
</div>
=============================================================
complete sample code , details sample code
<!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>Pabitra Custom Print To Excel</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#btnExpot').click(function () {
window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('div[id$=divContentToBePrint]').html()));
e.preventDefault();
});
})
</script>
</head>
<body>
<div>
<input type="button" id="btnExpot" value="Print To Excel"/>
</div>
<div id="divContentToBePrint">
<h3>Application Form</h3>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<td><input type="text" id="txtID" placeholder="Enter ID" title="Enter your ID" /></td>
<td><input type="text" id="txtName" placeholder="Enter Name" title="Enter your full name"/></td>
<td><input type="button" id="btnAdd" value="Add" title="click here for add new record"/></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>PABITRA</td>
<td>
<input type="button" id="btnEdit" value="Edit" title="click here for edit the record"/>
<input type="button" id="btnDelete" value="Delete" title="click here for delete the record"/>
</td>
</tr>
<tr>
<td>2</td>
<td>Microsoft</td>
<td>
<input type="button" id="Button3" value="Edit" title="click here for edit the record"/>
<input type="button" id="Button4" value="Delete" title="click here for delete the record"/>
</td>
</tr>
<tr>
<td>3</td>
<td>MS Sql Server</td>
<td>
<input type="button" id="Button1" value="Edit" title="click here for edit the record"/>
<input type="button" id="Button2" value="Delete" title="click here for delete the record"/>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Jquery Library with function
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#btnExpot').click(function () {
window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('div[id$=divContentToBePrint]').html()));
e.preventDefault();
});
})
</script>
Button which click event will call the jquery click event to export to excel
<input type="button" id="btnExpot" value="Print To Excel"/>
Div Content Which to Be exported to Ms Excel format.
<div id="divContentToBePrint">
<h3>Application Form</h3>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<td><input type="text" id="txtID" placeholder="Enter ID" title="Enter your ID" /></td>
<td><input type="text" id="txtName" placeholder="Enter Name" title="Enter your full name"/></td>
<td><input type="button" id="btnAdd" value="Add" title="click here for add new record"/></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>PABITRA</td>
<td>
<input type="button" id="btnEdit" value="Edit" title="click here for edit the record"/>
<input type="button" id="btnDelete" value="Delete" title="click here for delete the record"/>
</td>
</tr>
<tr>
<td>2</td>
<td>Microsoft</td>
<td>
<input type="button" id="Button3" value="Edit" title="click here for edit the record"/>
<input type="button" id="Button4" value="Delete" title="click here for delete the record"/>
</td>
</tr>
<tr>
<td>3</td>
<td>MS Sql Server</td>
<td>
<input type="button" id="Button1" value="Edit" title="click here for edit the record"/>
<input type="button" id="Button2" value="Delete" title="click here for delete the record"/>
</td>
</tr>
</tbody>
</table>
</div>
=============================================================
complete sample code , details sample code
<!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>Pabitra Custom Print To Excel</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#btnExpot').click(function () {
window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('div[id$=divContentToBePrint]').html()));
e.preventDefault();
});
})
</script>
</head>
<body>
<div>
<input type="button" id="btnExpot" value="Print To Excel"/>
</div>
<div id="divContentToBePrint">
<h3>Application Form</h3>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<td><input type="text" id="txtID" placeholder="Enter ID" title="Enter your ID" /></td>
<td><input type="text" id="txtName" placeholder="Enter Name" title="Enter your full name"/></td>
<td><input type="button" id="btnAdd" value="Add" title="click here for add new record"/></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>PABITRA</td>
<td>
<input type="button" id="btnEdit" value="Edit" title="click here for edit the record"/>
<input type="button" id="btnDelete" value="Delete" title="click here for delete the record"/>
</td>
</tr>
<tr>
<td>2</td>
<td>Microsoft</td>
<td>
<input type="button" id="Button3" value="Edit" title="click here for edit the record"/>
<input type="button" id="Button4" value="Delete" title="click here for delete the record"/>
</td>
</tr>
<tr>
<td>3</td>
<td>MS Sql Server</td>
<td>
<input type="button" id="Button1" value="Edit" title="click here for edit the record"/>
<input type="button" id="Button2" value="Delete" title="click here for delete the record"/>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
No comments:
Post a Comment