tablas - imprimir horizontal css
¿Cómo puedo personalizar la salida del navegador para imprimir/imprimir la vista previa? (4)
Intento ocultar dinámicamente ciertos DIV cuando ocurre una impresión (o vista previa de impresión) desde el navegador.
Puedo diferenciar fácilmente estáticamente al tener dos hojas de estilo, una para medios normales y otra para medios impresos:
Pero tengo que ir un paso más allá y ocultar algunos elementos dinámicamente cuando la hoja de estilos de impresión se activa durante una impresión basada en ciertos criterios
Una forma de resolverlo fácilmente sería manejar un evento DOM para manejar print / printview, luego podría usar jQuery para cambiar la visualización: ninguno en las clases que necesitan ocultarse, pero no puedo encontrar un evento de impresión DOM !!
¿Alguien sabe cuál es la solución?
No todos los navegadores te permiten capturar el evento de impresión. He visto esto abordado al agregar un enlace ''imprimir esta página'' y luego usar ese evento de clic para lograr lo que necesita.
Simplemente marque esos DIV con una clase que esté oculta en la hoja de estilo de impresión:
HTML
<div id=''div19'' class=''noprint''>
...
</div>
print.css
.noprint {
display: none;
}
Si no sabes de antemano qué elementos necesitas ocultar, puedes usar javascript para establecer la clase para los objetos dados:
Javascript
document.getElementById(''div19'').className=''noprint'';
Hay un evento onbeforeprint en IE. No parece ser compatible con otros navegadores principales. (Probé Firefox 3.0.3 y Safari 3.1.2).
No creo que necesites un evento impreso. Todo lo que necesita hacer es ajustar sus estilos de @media print en función de su criterio Javascript (?). Cuando el usuario intente imprimir la página, se aplicará el estilo de @media print y sus estilos estarán vigentes:
<html>
<head>
<style id="styles" type="text/css">
@media print { .noprint { display:none; } }
</style>
<script type="text/javascript">
var x = Math.random();
if (x > .5) {
var style = document.createElement(''style'');
style.type = ''text/css'';
style.innerHTML = ''@media print { .maybe_noprint { display:none; } }'';
document.getElementsByTagName(''head'')[0].appendChild(style);
}
</script>
</head>
<body>
<div class="noprint">This will never print.</div>
<span class="maybe_noprint">This may print depending on the value of x.</span>
</body>
</html>
Si está utilizando criterios del lado del servidor para determinar qué impresiones, simplemente @media print código del lado del servidor escupir @media print para decorar las clases según sea necesario. Además, es posible que desee considerar modificar una clase existente que ya está dentro de @media print , o crear el nuevo CSS utilizando algo que no sea innerHTML , lo cual admitiré que huele muy mal a mí, pero parece funcionar en Opera 9.6, Safari for Windows 3.1.2, IE 6 y Firefox 2.0.0.17 (no he probado otros navegadores).