ARCmop Java Programacion Solaris Linux

Java-linux-programacion

Imprimir desde el Navegador directamente a la impresora

Posted by Cmop en mayo 12, 2012

Buenos dias a todos, como parte del desarrollo del sistema web de comercial que se esta desarrollo en EPS-GRAU llegó el requerimiento que los reportes mas usados sean impresos directamente en laa impresora, al hacer click en un boton.

Se ha logrado desarrollar la función, pero bajo ciertas condiciones las cuales son:

  1. Navegador Soportado: Mozilla Firefox.
  2. Reportes : Html, enviado con Ajax desde el servidor.
  3. Libreria JS: Jquery y Jquery Print Area.

Veamos algo simple, para invocar la funcion desde javascript solo se necesita hacer:

window.print();

Este comando nos mostrara el cuadro de dialogo para seleccionar la impresora…

El primer punto es quitar este dialogo de seleccion de impresora, en firefox es tan sencillo como:

  1. Abrir una nueva pestaña
  2. Escribir en ella –> about:config
  3. Hacer click en el boton
  4. Escribir –> print.(no se olviden del punto)
  5. Verificar si existe el valor: print.always_print_silent 
    • Si existe este valor hay que cambiarlo por TRUE (haciendo doble click se le cambia de valor)
    • No existe este valor hay que crearlo:
      1. Click derecho en alguno de los valores
      2. Seleccionar Nuevo –> Logico
      3. Asignarle el nombre:  print.always_print_silent
      4. Asignarle el valor de TRUE

Hecho esto el dialogo de seleccion desaparece, adicionalmente pueden ocultar el cuadro de dialogo de “Progreso de Impresion” con el valor print.show_print_progress estableciendolo a false

En el vídeo se observa esta acción y los resultados.

Ahora ¿¿como se hizo para que no se imprimiera toda la pagina sino solo el reporte que vino desde el servidor??

Bien la respuesta es: jPrintArea o jqPrint, pues bien la segunda es la version posterior basada en la primera. Ambas nos permiten seleccionar un componente html y mandar todo su contenido a imprimir, en el caso del video, se guarda en un div temporal.

Si usamos jPrintArea solo es:

$("#id_div").printArea();

Si usamos jqPrint solo es:

$("#id_div").jqprint();

Personalmente jPrintArea me parece mas rápida, pero en la página de Jquery plugins se recomienda usar jqPrint.

Nosotros hicimos una funcion asi:


jQuery.downloadReporte = function(url, data){

url= "reportes/"+url;

$.ajax({

url: url,

data: data,

type: 'post',

success: function(datar){

var randomDivImpresion=Math.floor(Math.random()); //Numero aleatorio

var nombreDivImpresion='recibeImpresion'+randomDivImpresion; //Div temporal con numero aleatorio en el nombre

var div_impresion='<div id="'+nombreDivImpresion+'"></div>'; //codigo html del div

$(div_impresion).appendTo('body'); //se agrega al elemento body, para hacerlo funcional.

$("#"+nombreDivImpresion).html(datar); //se asigna la pagina que viene desde el servidor.

$("#"+nombreDivImpresion).jqprint(); //se invoca la impresion.

$("#"+nombreDivImpresion).remove(); //se remueve el div temporal despues de la impresion.

}

});

}

JPrintArea lo encuentras en: http://jquery-print.ssdtutorials.com/js/jquery.PrintArea.js_4.js

JqPrint lo encuentras en: https://nodeload.github.com/tanathos/jquery.jqprint/zipball/master

Bueno eso es todo por hoy, es hora de dormir.

saludos a todos.

4 comentarios to “Imprimir desde el Navegador directamente a la impresora”

  1. diego said

    sabes si algo para google chrome

  2. Omar said

    Y si la impresora es de impacto, es decir de matriz de puntos, como alineas el texto en un formato preimpreso?
    De antemano gracias

  3. Luis Jovel said

    Infinitamente agradecido, Gracias por publicar esta informacion tan baliosa.

  4. mavemix said

    En primer lugar, gracias por la info, me está resultando muy útil.
    Lo segundo, mis dudas sobre el css, es decir: utiliza el archivo css para dar formato al div que imprimo? O debería definir un nuevo css media=”print” para que la impresión salga en el formato que yo quiera? Actualmente me imprime muy pequeñito todo y temo que sea debido a esto precisamente…

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: