SummArg | Cursos y recursos para webmasters

18/03/2013

Crear una página de impresión para un website usando jQuery

La forma tradicional y apropiada de generar una página apta para impresión en un website es incluyendo una plantilla de estilos para tal finalidad. Como el resultado visible debe ser lo mas simple posible normalmente son rápidas de generar. Generalmente basta con eliminar los fondos de color, colocar las tipografías en negro y esconder objetos que estén demás a la hora de imprimir, tales como anuncios publicitarios y barras de navegación.

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Sin embargo hay casos muy excepcionales en donde tal cosa no es del todo sencillo de lograr o no es posible y necesitamos poder seleccionar un contenido puntual de la página para abrirlo en ventana nueva e imprimirlo.

Utilizaremos el siguiente marcado HTML para colocar los elementos de nuestro artículo (en nuestro caso notarán que es una plantilla WordPress).

<div class="printSection">
			<div class="bandavolanta">
				<?php $category = get_the_category();
						if($category[0]){
						echo '<a href="'.get_category_link($category[0]->term_id ).'">'.$category[0]->cat_name.'</a>';
						}
						 ?>
			 </div>
		<h2 class="title"><a href="<?php the_permalink(); ?>" title="<?php the_title();?>"><?php the_title();?></a></h2>
				<div class="printControls">
					<p class="printControl">Imprimir</p>
				</div>
		<div class="theDate"><?php echo get_the_date(); ?></div>
		<?php the_content(); ?>
		</div><!-- end of printSection -->

A nuestro .printControls le damos el siguiente estilo:

.printControls {
width: 100%;
float:left;
margin: 5px 0;
padding: 5px 0;
height: 30px;
}
.printControl {
background-image: url(images/print.png);
background-repeat:no-repeat;
background-position: left center;
height: 28px;
font-size:11px;
font-weight:bold;
color:#59b02e;
line-height:24px;
float:right;
}

Y obviamente la imagen print.png corresponde al icono de impresora, tal como pueden ver a continuación.

impresion1

En el HTML o PHP, luego del artículo, colocamos el siguiente código (recuerden que deben tener linkeado al proyecto el archivo de jQuery):

<script type="text/javascript">
$(document).ready(function(){
        $('.printControl').click(function(){
            $('.printSection').children().addClass('printversion');
            var printContent= $('head').html() + $(this).parent().parent().html();
            $('.printSection').children().removeClass('printversion');
            var windowUrl = 'about:blank';
             var uniqueName = new Date();
             var windowName = 'PrintSection' + uniqueName.getTime();
             var printWindow = window.open(windowUrl, windowName, 'left=500,top=000,width=600,height=1000');
             printWindow.document.write(printContent);
             printWindow.document.close();
             printWindow.focus();
             printWindow.print();
        });
    });
</script>

Lo que el código hace es buscar el código que figura dentro de .printSection y añadirle la class .printversion e imprimirlo dentro de una ventana nueva que tiene determinados valores iniciales. A la vez abre ya el panel de impresión.

De este modo sólo nos resta colocar el CSS deseado para .printversion y ya tenemos nuestro documento listo para imprimir.

impresion2

Dejar un comentario