Imprimir una DIV con Javascript o jQuery


Está función imprime un objeto seleccionado por el id, además podemos añadirle un estilo css para darle formato
function imprimir(id)
    {
        var div, imp;
        div = document.getElementById(id);//seleccionamos el objeto
        imp = window.open(" ","Formato de Impresion"); //damos un titulo
        imp.document.open();     //abrimos
        imp.document.write('style: ...'); //tambien podriamos agregarle un <link ...
        imp.document.write(div.innerHTML);//agregamos el objeto
        imp.document.close();
        imp.print();   //Abrimos la opcion de imprimir
        imp.close(); //cerramos la ventana nueva
    }
Para llamar la funcion:
<div id="paraImpirmir">Lorem.......</div>
<a href="javascript:imprimir('paraImprimir')">Imprimir</a> 
 Y listo....

podemos cambiar la función por la siguiente para usarla con jQuery

function imprimir(id)
    {
        var imp;
        imp = window.open(" ","Formato de Impresion"); 
        imp.document.open(); 
        imp.document.append('style: ...'); 
        imp.document.append($('#'+id).html);
        imp.document.close();
        imp.print();   
        imp.close(); 
    }


Gracias  a Oscar por el aporte
Nota: también puede funcionar con cualquier objeto html, como una tabla o un form o un documento completo

Comentarios

  1. Disculpa no entendi esta parte:
    imp.document.write('style: ...'); //tambien podriamos agregarle un <link ...

    A que se refiere? a meter todo el <link... o se tiene que introducir solo la ruta de la hoja de estilo?

    ResponderEliminar
  2. Si, podrias agregar un tag tipo <link ....
    el document.write nos permite agregar lo que queramos inclusive scripts y enlaces

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Los 5 vídeos más impresionantes de la semana #5

Enlaces rápidos (30-03-2010)