Cómo imprimir una parte específica de una web utilizando jQuery

En muchas ocasiones debemos imprimir solo una pequeña porción de una web en un desarrollo. Si ahora mismo trabajas en una función similar y estás buscando una solución para resolver este entuerto, es más que probable que hayas llegado al sitio adecuado. En este artículo, te proporcionamos un método sencillo de imprimir una parte específica de una web. Para ello utilizaremos el plugin de jQuery PrintArea, con el que puedes imprimir una porción de una web, o bien, la página entera.

El plugin de jQuery PrintArea ha sido diseñado para imprimir partes concretas de un sitio web. Este plugin te permite indicarle dos modos de impresión, IFRAME-mode y Popup-mode. El IFRAME-mode es el método más discreto y sutil, y el Popup-mode, como habrás podido adivinar, abre una nueva ventana del navegador.

Javascript

Lo primero que debes incluir es la librería jQuery (jquery.js) y el plugin de jQuery PrintArea (jquery.PrintArea.js)

<script src="jquery.js"></script>
<script src="jquery.PrintArea.js"></script>

Escribe el siguiente código Javascript para iniciar el plugin de jQuery PrintArea. En la variable mode, puedes especificar los dos modos, o bien iframe, o bien popup.

<script>
$(document).ready(function(){
    $("#printButton").click(function(){
        var mode = 'iframe'; //popup
        var close = mode == "popup";
        var options = { mode : mode, popClose : close};
        $("div.printableArea").printArea( options );
    });
});
</script>

HTML

El siguiente HTML contiene un botón de imprimir, y el contenido a imprimir.

<a href="javascript:void(0);" id="printButton">Print</a>  
<div class="printableArea">
    All the printable content goes here......
</div>

Utilizando este script puedes imprimir no solo una parte de una página web, sino también la página completa. Solo debes pasarle a la función printArea() el id o la clase del respectivo div. Puedes hacerte con la librería jQuery.PrintArea.js a través de este enlace. ¡Nos leemos!

Fuente: codexworld.com

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.