PDA

View Full Version : Printing a section of Web page Only



matrixbegins
10-06-2008, 09:35 AM
HI There !!

I want to print only a particular section of the page e.g content of a div or span or a table. Can I use some script (Java script DHTML or CSS). Please Try to provide that script.

Please help me out.
Many thanks

Ankur

codeexploiter
10-06-2008, 12:26 PM
Here is a demo. In this demo it prints the content of a particular div element based on its ID.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#prn1{
border:1px solid #9F1D1D;
width: 750px;
padding: 5px;
}

</style>
</head>
<body>
<div id="prn1">
Praesent metus. Vivamus ornare suscipit nisl! Ut nec diam varius mauris venenatis euismod. Donec quam nisi, ultrices tincidunt, tempor ut, tristique ac, ipsum! Pellentesque metus quam, commodo at, elementum nec, rhoncus eget, enim. Cras pretium nulla at ante. Morbi feugiat purus id orci. Mauris quis nunc ut dolor congue accumsan. Integer eget ligula ut nibh dignissim lacinia. Integer sodales porttitor purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed risus neque, fringilla sit amet, consectetuer in, congue sed, mi. Suspendisse mollis condimentum libero. Etiam tincidunt, justo eleifend volutpat consequat, ligula est dictum felis, sit amet aliquet elit turpis sit amet turpis.
Pellentesque tristique, lectus sit amet ullamcorper fermentum, quam nunc gravida ante, a malesuada turpis nunc id lacus. Fusce tristique placerat erat. Quisque a felis. In velit eros, volutpat sit amet, sodales a, dictum id; metus. Nam leo. Aliquam at urna et mauris accumsan tincidunt. Praesent fringilla, est tincidunt suscipit pellentesque, justo leo congue orci, ut lobortis risus libero vitae nunc. Aenean felis diam, suscipit vitae, pellentesque eu, vestibulum nec, lorem? Duis quis urna vel nibh sagittis imperdiet! Curabitur non turpis. Nulla odio! Suspendisse suscipit dolor a leo. Sed magna massa, blandit ut, laoreet ac, rhoncus quis, justo. Integer ultrices aliquam purus.
Phasellus in mi in orci feugiat congue. Proin non justo non lorem ornare porttitor. Donec luctus. Pellentesque arcu. Donec vitae massa vitae erat egestas hendrerit! Ut at metus ac ligula egestas blandit. Proin dignissim; nunc in pharetra feugiat, elit arcu rhoncus lacus, et lacinia est turpis a urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce dapibus, erat in vehicula tempor, enim nisi molestie purus, sit amet aliquam felis arcu non nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam risus dui, vestibulum eget, lacinia et, auctor sed, urna. Vivamus eu tortor suscipit ante ornare aliquam. Aliquam vitae diam. Phasellus tincidunt pede quis orci. Quisque in dolor. Integer interdum tempor dui? Nam vel nisl! Donec neque. In ante leo, interdum sit amet, fermentum sed, varius a, magna.
</div>
<br/>
<button id="print">Print</button>
<script type="text/javascript">
function printElement(el){
if(typeof el === 'string'){
el = document.getElementById(el);
if(!el){
alert('Element doesnt exists');
return false;
}
}
if(!el){
alert('Element doesnt exists');
return false;
}

var content = document.getElementById('prn1').innerHTML;
var shtm = "<html><head><title>Print</title></head><body>" + content + "</body></html>";
var w = window.open("","","width=750,height=350");
w.document.write(shtm);
w.document.close();
w.focus();
w.print();
w.close();
}
document.getElementById('print').onclick = function(){
printElement('prn1'); //Pass the element ID whose content you want to print.
};
</script>
</body>
</html>



Hope this helps.