¿Cómo puedo personalizar la salida del navegador para imprimir/imprimir vista previa?

Estoy tratando de ocultar dinámicamente ciertos DIV cuando ocurre una impresión (o vista previa de impresión) desde el navegador.¿Cómo puedo personalizar la salida del navegador para imprimir/imprimir vista previa?

puedo diferenciar fácilmente de forma estática por tener dos hojas de estilo, uno para el normal y otra para medios impresos:

pero tengo que ir un paso más allá y ocultar algunos elementos de forma dinámica 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 deben ocultarse , pero no puedo encontrar un evento de impresión DOM !!

¿Alguien sabe cuál es la solución?

Fuente

2008-10-10 user26793

¿Quiere decir que necesita ocultar divs en la pantalla después de que el usuario imprima (o imprima vistas previas) la página? –

Hay un evento onbeforeprint en IE. No parece ser compatible con otros navegadores principales. (He probado Firefox 3.0.3 y Safari 3.1.2.)

Fuente

2008-10-10 12:22:02

No todos los navegadores le 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.

Fuente

2008-10-10 12:24:59 derby

Sólo etiquetar los DIVs con una clase que se esconde en la hoja de estilos de impresión:

HTML

<div id='div19' class='noprint'> 
    ... 
</div>

print.css

.noprint { 
    display: none; 
}

Si usted no sabe de antemano qué elementos necesita ocultar, puede usar javascript para establecer la clase para el obje CTS:

Javascript

document.getElementById('div19').className='noprint';

Fuente

2008-10-10 13:20:48

no creo que necesita un evento de impresión. Todo lo que necesita hacer es ajustar sus estilos @media print según su criterio Javascript (?). Cuando el usuario intenta imprimir la página, el estilo @media print se aplique y sus estilos estará en efecto:

<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 los criterios del lado del servidor para determinar qué impresiones, a continuación, sólo tiene código del lado del servidor de la saliva @media print para decorar las clases según sea necesario. Además, es posible que desee considerar la modificación de una clase existente que ya está dentro de @media print, o crear el nuevo CSS usando algo que no sea innerHTML, lo que admitiré huele horrible, pero parece funcionar en Opera 9.6, Safari para Windows 3.1 .2, IE 6 y Firefox 2.0.0.17 (no he probado otros navegadores).

Fuente

2008-10-10 20:06:08

¿Cómo puedo personalizar la salida del navegador para imprimir/imprimir vista previa?

Respuesta

Cuestiones relacionadas