Javascript::Ocultar controles a la hora de imprimir

BeRSeRKeR · 07 de Septiembre de 2007, 04:19:30 PM

Hola.

Aquí estoy de nuevo con una duda de HTML/Javascript.

Resulta que quiero que cuando un usuario le de al botón de imprimir que tengo en un informe generado en HTML, éste se oculte para que no salga en la impresión y que automáticamente vuelva a aparecer tras la misma.

Se supone que con ésto funciona:

Código [Seleccionar]

onPrintButtonClicked()
{
    var printButton = document.getElementById('printButton');
    printButton.style.display = 'none';
    print();
    printButton.style.display = '';
}

Pero a mí no me funciona. Efectivamente desaparece y cuando confirmo el cuadro de diálogo de configuración de impresión me aparece de nuevo, pero aún así sale en la copia impresa.

Así que, ¿se os ocurre algo para solucionar ésto?.

Se me había ocurrido hacer un "sleep" durante un par de segundos o así pero me parece algo cutre. :P

Gracias.

vincent · 07 de Septiembre de 2007, 04:45:31 PM

No tuvo Kabila problemas también imprimiendo desde html? Ahora no encuentro el post pero me parece recordar que si...

siento no poder ser de más ayuda!

Tei · 07 de Septiembre de 2007, 05:39:32 PM

Hola.

En cosas de redes no debes implementar una feature en capa de aplicacion si la puedes implementar en capa de protocolo.

Igualmente no debes implementar algo en html si lo puedes hacer en CSS, o en HTTP.

Y no debes hacer algo en javascript si lo puedes hacer con CSS o html o http.

En tu caso lo que estas haciendo se puede hacer con CSS, por tanto se debe hacer en CSS y no en javascript.

Consiste en tener una hoja de estilos separada para el medio "print" de modo que sea la que se escoge para imprimir.

Tendrias entonces una hoja CSS para "screen" otra para "print" y posiblemente otra para "handheld". En esta hoja para impresion, simplemente ocultas lo que no quieres que aparezca, y modificas un poco el layout porque por ejemplo en impresion no tienen sentido los menus de navegacion.

BeRSeRKeR · 07 de Septiembre de 2007, 06:03:49 PM

Muchas gracias Tei, desde luego es la forma más elegante.

Por si a alguien le interesa esto es una prueba que he hecho:

Código [Seleccionar]

<html>
<head>
    <title>Prueba</title>
		<style type="text/css">
	    @media screen
	    {
	        .hiWorld
	        {
	            font-size: 20px;
	        }
	    }
	    @media print
	    {
	        .printButton
	        {
	            display: none;
	        }
	        .hiWorld
	        {
	            font-size: 20px;
	            font-weight: bold;
	        }
	    }
		</style>
</head>
<body>
    <span class="hiWorld">Hi world!</span>
    <input type="button" class="printButton" value="Print" onclick="javascript:print();" />
</body>
</html>

Saludos.

bnl · 07 de Septiembre de 2007, 06:16:50 PM

Interesante
¿Como se cambia entre un estilo y otro?

BeRSeRKeR · 07 de Septiembre de 2007, 07:17:24 PM

Cita de: "bnl"Interesante
¿Como se cambia entre un estilo y otro?

Eso es lo mejor de todo. Es automático. :)

bnl · 07 de Septiembre de 2007, 08:07:35 PM

Buscando por google he encontrado que tambien se pueden poner en hojas de estilos de la forma tradicional pero añadiendo el atributo media:

Código [Seleccionar]

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

jazcks · 08 de Septiembre de 2007, 12:14:30 AM

la mejor manera es la de Tei claro, pero si quieres saber como hacer la "chapucilla" en js :P , creo que te funcionaría con

Código [Seleccionar]


printButton.style.visibility = 'hidden';
print();
printButton.style.visibility = 'visible';

Foros

Javascript::Ocultar controles a la hora de imprimir