sábado, 17 de enero de 2015

Usar JavaScript para imprimir una página


A la hora de usar PeopleSoft mas de una vez necesitamos/queremos imprimir la página en la que estamos trabajando.

Lamentablemente, a la hora de hacerlo, la única forma conocida por mi (hasta hace poco tiempo) es imprimir la página desde el navegador.
Pero a la hora de hacerlo nos incluye en la impresión el menú lateral y/o superior.
Esto puede ser molesto, o al menos innecesario.

Con unos simples pasos, veremos la forma de imprimir el contenido de una página, sin mostrar esos sectores indeseados.

Veamos un ejemplo práctico:

1) Tenemos la página de pedidos que hemos usado en el ejemplo anterior:



2) Vamos a agregar un área HTML, asignándole un campo LONG


3) Agregamos un botón para imprimir la página con ciertas especificaciones distintas a las usuales:


El campo tiene que tener un mínimo de 25 caracteres de largo, por lo cual uso el campo DESCR, en lugar de un campo de botón común.
El destino va a ser un link Externo, porque no se trata de un evento FieldChange, sino que queremos ejecutar un script en una página ventana a la nuestra.
El link va a ser dinámico, ya que lo generaremos por PCode.

Además, le damosun nombre a nivel de página al campo, por si queremos encontrarlo" y utilizarlo desde el HTML.


Para darle sentido a la página le cambiamos la etiqueta al campo.


4) La página nos quedaría de la siguiente forma:


5) Cargamos el script en el campo HTMLAREA:


En este evento cargamos tanto el valor del HTMLAREA, como el valor del botón.

El botón lleva el script a ejecutar: javascript:window.print();


En cambio, el contenido del HTML será entonces línea por línea: 
a) <style type=""text/css""> 
b)    @media print { 
c)            #PAGEBAR, .PSHEADERTOOLBARFRAME { 
d)                    display: none }
e)      }
f) </style>

a) Abro el tag de estilos, indicando que usaré CSS
b) Especifico para que tipo de salida es el estilo, aclarando que es solo a la hora de imprimir.
c) Elijo que elementos del HTML usarán la propiedad siguiente, en este caso #PAGEBAR y .PSHEADERTOOLBARFRAME son la barra de navegación y el encabezado propio de las páginas de PeopleSoft.
d) le pido que la propiedad display tenga un estado "none", es decir, no se mostrarán y cierro la llave de la propiedad
e) cierro la llave del tipo de salida.
f) cierro el tag de estilo.


6) Entramos a la página desde el sistema:


7) Al darle clic al botón, se ejecuta el evento ingresado:


8) Y la impresión resultante, queda de la siguiente manera:


9) Por último, podríamos también ocultar el botón "Imprimir" agregándolo a las propiedades del CSS.
Para hacerlo entonces, basta agregar la propiedad en el RowInit:


Le anteponemos el # porque así es como se indica el ID del Campo en el CSS.

Si ahora volvemos a imprimir, el campo ya no aparece en la impresión.



Espero que este simple Paso a Paso les resulte tan útil como a mí.

Saludos.
Facundo Salerno.


No hay comentarios:

Publicar un comentario