Ultima revisión 24/03/2013

Crear una página de impresión con jQuery

Normalmente, cuando los desarrolladores queremos implementar la funcionalidad de imprimir una página lo hacemos a través una plantilla de estilos que, en la mayoría de los casos, suele ser una versión limpia y reducida de la web. Generalmente basta con eliminar los fondos, establecer nuevos colores en las tipografías y esconder algunos objetos, tales como las barras de navegación.

Sin embargo, eventualmente, nos encontramos con casos excepcionales donde el proceso de generación se vuelve tedioso e incluso tenemos que recurrir a ventanas emergentes. Aquí recurriremos a ambas cosas de forma fácil.

Para empezar, primero creamos el archivo de estilos y lo insertamos en la página que queremos que se pueda imprimir.

Sólo 2 cosas. La primera es, por si os interasa, que el tamaño de una DIN-A4, en píxeles, es 842px de alto y 595px de ancho.

Y la segunda es que el CSS para imprimir, tendrá los mismos elementos que la general o normal, sólo que, estarán por debajo de otro selector que llamaremos printVersión. Así, por ejemplo, todo lo que antes dependía de article, ahora dependerá o debería depender de .printVersion article porque, en la nueva ventana, introduciremos el elemento article dentro de un div class="printVersion".

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

Segundo ponemos el código del botón que ejecutará la acción de imprimir.

<div class="printButtonDiv">
    <p class="printButton">Imprimir</p>
</div>

Ahora añadimos el siguiente código de jQuery.

<script type="text/javascript">
    $(document).ready(function(){ 
        $('.printButton').click(function(){ 
             var printVersion = $('.article').clone();
            // Eliminamos los elementos indeseables a través de jQuery. En este caso sólo uno.
            printVersion.children().remove(".contactFloatLayer");
        
            // Creamos el contenido del documento que se va a imprimir.
            var printContent = $('head').html() + '<div class="printVersion">' + printVersion.html() + '</div>'; 

            // Establecemos la nueva ventana.
            var windowUrl = 'about:blank'; 
            var createdAt = new Date(); 
            var windowName = 'printScreen' + createdAt.getTime(); 
            var printWindow = window.open(windowUrl, windowName, 'resizable=1,scrollbars=1,left=500,top=000,width=868'); 
            printWindow.document.write(printContent); 

            printWindow.document.close(); 
        
            // Establecemos el foco.
            printWindow.focus(); 
        
            // Lanzamos la impresión.
            printWindow.print();   
        });
    });
</script>

Y ya está.