domingo, 14 de octubre de 2012

Imprimir solo el contenido que esta dentro de un Div

La forma recomendada para imprimir el contenido de un div es con JQuery, mediante el siguiente ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<head>
<title>Print Part of a Page With jQuery</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.print.js"></script>
<script type="text/javascript">
// When the document is ready, initialize the link so
// that when it is clicked, the printable area of the
// page will print.
$(
function(){
// Hook up the print link.
$( "a" )
.attr( "href", "javascript:void( 0 )" )
.click(
function(){
// Print the DIV.
$( ".printable" ).print();
// Cancel click event.
return( false );
}
)
;
}
);
</script>
<style type="text/css">
body {
font-family: verdana ;
font-size: 14px ;
}
h1 {
font-size: 180% ;
}
h2 {
border-bottom: 1px solid #999999 ;
}
.printable {
border: 1px dotted #CCCCCC ;
padding: 10px 10px 10px 10px ;
}
img {
background-color: #E0E0E0 ;
border: 1px solid #666666 ;
padding: 5px 5px 5px 5px ;
}
a {
color: red ;
}
</style>
</head>
<body>
<h1>
Print Part of a Page With jQuery
</h1>
<p>
<a>Print Bio</a>
</p>
<div class="printable">
<h2>
Jen Rish
</h2>
<p>
Jen Rish, upcoming fitness and figure model has some
crazy developed legs!
</p>
<p>
<img
src="jen_rish_crazy_legs.jpg"
width="380"
height="570"
alt="Jen Rish Has Amazing Legs!"
/>
</p>
<p>
I bet she does some <strong>serious squatting</strong>!
</p>
</div>
</body>
</html>
Otra forma para imprimir el contenido que esta dentro de un div vamos a usar Javascript:
function ImprimeDiv()
{
var divToPrint=document.getElementById('DivIdToPrint');
var newWin=window.open('','Print-Window','width=100,height=100');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
Este JavaScript solo abrira una nueva ventana con el contenido del div, este se imprimira y luego se cerrara la ventana. Es muy importante el timeout de la ultima linea, de otra manera la ventana en IE se cerrara antes de que se imprima.

No hay comentarios:

Publicar un comentario