Stratos: Punto de Encuentro de Desarrolladores

¡Bienvenido a Stratos!

Acceder

Foros





Javascript::Ocultar controles a la hora de imprimir

Iniciado por BeRSeRKeR, 07 de Septiembre de 2007, 04:19:30 PM

« anterior - próximo »

BeRSeRKeR

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:

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.
¡Si te buscan en nombre de la ley, huye en nombre de la libertad!!

vincent

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!
Desarrollo en .Net y metodologías http://devnettips.blogspot.com

Tei

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

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

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

<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.
¡Si te buscan en nombre de la ley, huye en nombre de la libertad!!

bnl

Mi web: http://www.brausoft.com/
No sabían que era imposible, así que lo hicieron.

BeRSeRKeR

Cita de: "bnl"Interesante
¿Como se cambia entre un estilo y otro?
Eso es lo mejor de todo. Es automático. :)
¡Si te buscan en nombre de la ley, huye en nombre de la libertad!!

bnl

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

<link href="impresion.css" media="print" rel="stylesheet" type="text/css" />
<link href="general.css" media="screen" rel="stylesheet" type="text/css" />
Mi web: http://www.brausoft.com/
No sabían que era imposible, así que lo hicieron.

jazcks

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


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






Stratos es un servicio gratuito, cuyos costes se cubren en parte con la publicidad.
Por favor, desactiva el bloqueador de anuncios en esta web para ayudar a que siga adelante.
Muchísimas gracias.