This can be done using CSS and JavaScript as well. See examples below.
Print part of the page using CSS
To do it using CSS you need to apply @media specific styles to page content which you want to print and non-printable stuff.
<html>
<head>
<style type="text/css">
#printable { display: none; }
@media print
{
#non-printable { display: none; }
#printable { display: block; }
}
</style>
</head>
<body>
<div id="non-printable">
Your normal page contents
</div>
<div id="printable">
Printer version
</div>
</body>
</html>
Print part of the page using JavaScript
To achieve the same functionality using JavaScript you need to use an iframe and set it's innerHTML based on what you want to print.
<html>
<head>
<title>Print Test Page</title>
<script>
function printDiv(divId) {
window.frames["print_frame"].document.body.innerHTML=
printDivCSS + document.getElementById(divId).innerHTML
window.frames["print_frame"].window.focus()
window.frames["print_frame"].window.print()
}
</script>
</head>
<body>
<b>Div 1:</b> <a href=javascript:printDiv('div1')>Print</a><br>
<div id=div1>This is the div1's print output</div>
<br><br>
<b>Div 2:</b> <a href=javascript:printDiv('div2')>Print</a><br>
<div id=div2>This is the div2's print output</div>
<br><br>
<iframe name=print_frame width=0 height=0
frameborder=0 src=about:blank></iframe>
</body>
</html>
No comments:
Post a Comment