¿Hay alguna solución para desactivar los cambios de estilo de Javascript en la impresión?

Question

¿Hay alguna solución para deshabilitar los cambios de estilo de Javascript en la impresión?

Por ejemplo, si estoy ocultando algo a través de Javascript, pero quiero incluir esa información oculta en la impresión.

He escondido div usando Javascript y quiero mostrar que div si Javascript está deshabilitado. Ahora el problema es que, porque div está oculto usando Javascript, tampoco se muestra cuando se imprime la página.

Answer 1

Utilice una hoja de estilo de impresión junto con !important para forzar que el elemento sea visible para la impresión.

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

CSS:

#myDiv { display: block!important; } 

Answer 2

le sugiero que tome un vistazo a este artículo: CSS Design: Going to Print.

Grz, Kris.

Answer 3

Ya se ha mencionado el uso de !important, pero es un instrumento contundente y las cosas se vuelven muy complicadas una vez que empiezas a necesitar anular las que ya están !important.

Uno de los grandes beneficios de CSS es que le permite separar el estilo de la estructura. En lugar de utilizar JS para manipular el estilo de un elemento, utilícelo para manipular la estructura . Por ejemplo, manipulando la propiedad className.

La hoja de estilos del medio de pantalla puede ocultar el elemento y dejarlo visible para la hoja de estilos del material de impresión.

Esto tiene la ventaja adicional de que no necesita pensar en tener que anular estos estilos ya que no se aplicarán en primer lugar (para imprimir).

Answer 4

He encontrado una solución alternativa (al menos, funciona para mí). En mi caso, tenía una página html básica con algunos estilos (screen.css & print.css) más algunos javascript para mejorar progresivamente la página con características adicionales, etc.

Cuando llegó el momento de imprimir la página me di cuenta de que el js estaba afectando el diseño (ya que estaba haciendo un estilo css a través de jquery).

lo que terminó haciendo fue la siguiente:

en "screen.css"

body { 
    background-color: #ccc; /* or whatever colour your designer chose; if it NEEDS to be white, simply change something else (e.g. background-image, font-size, etc.) */ 
} 

en "print.css"

body { 
    background-color: #fff; 
} 

en el" -javascript-file.js "

$(document).ready(function() 
{ 
    if (isPrinting() == false) 
    { 
     init(); 
    } 
}); 

function isPrinting() 
{ 
    var isPrint = false; 
    /* I'm not 100% sure about the string literal check 'rgb(255, 255, 255)', 
     should do some testing here with other values || other attributes... 
     (font-size, color, line-height, other attributes that will have the 
     greatest difference/variation between "screen" and "print" styles) 
    */ 
    if ($('body').css('background-color') == 'rgb(255, 255, 255)') 
    { 
     isPrint = true; 
    } 
    return isPrint; 
} 

function init() 
{ 
    // All sorts of awesome goes here 
} 

Y eso fue todo! ¡Funcionó!

Aquí es una visión general de lo que está pasando: la página

• usuario carga
• cargas navegador está configurado "screen.css" color de fondo
• Administración a "#ccc"
• navegador carga "del -javascript-file.js"
• JS cheques de color de fondo ... es "#ccc" ...
• JS hace su cosa
• usuario golpea comando de impresión
• navegador carga "print.css"
• color de fondo cambia a "cuerpo" #fff
• cargas del navegador "la-javascript-file.js"
de color
• JS cheques del cuerpo de antecedentes
• JS da cuenta de color de fondo es "#fff"
• JS no hace nada :)

Espero que esto ayude a alguien por ahí :)