¿Cómo mostrar solo ciertas partes con CSS para Imprimir?

Question

Tengo una página con muchos datos, tablas y contenido. Quiero hacer una versión impresa que solo muestre muy pocas cosas seleccionadas.

En lugar de escribir otra página solo para imprimir, estaba leyendo acerca de la función de CSS para "@media print".

Primero, ¿qué navegadores lo soportan? Como se trata de una función interna, está bien si solo los últimos navegadores lo admiten.

Estaba pensando en etiquetar algunos elementos DOM con una clase "imprimible", y básicamente aplicar "mostrar: ninguno" a todo excepto a aquellos elementos con la clase "imprimible". ¿Eso es factible?

¿Cómo logro esto?

EDIT: Esto es lo que tengo hasta ahora:

<style type="text/css"> 
@media print { 
    * {display:none;} 
    .printable, .printable > * {display:block;} 
} 
</style> 

Pero lo esconde todo. ¿Cómo puedo hacer visibles esos elementos "imprimibles"?

EDIT: Tratando ahora el enfoque negativo

<style type="text/css"> 
@media print { 
    body *:not(.printable *) {display:none;} 
} 
</style> 

Esto se ve bien en teoría, sin embargo, no funciona. Tal vez "no" no es compatible con CSS avanzado ...

Answer 1

Inicio here. Pero básicamente lo que estás pensando es el enfoque correcto.

Gracias, ahora mi pregunta es en realidad convertirse en : ¿Cómo solicito CSS a una clase y todos sus descendientes elementos? De modo que puedo aplicar "display: block" a lo que esté en las zonas "imprimibles" de .

Si un elemento está configurado en display:none;, todos sus elementos secundarios estarán ocultos también. Pero en todo caso. Si quieres un estilo para aplicarlo a todos los niños de otra cosa, de hacer lo siguiente:

.printable * { 
    display: block; 
} 

Eso sería aplicar el estilo a todos los niños de la zona de "imprimir".

Answer 2

Casi todos los navegadores son compatibles. Puede ser ventajoso utilizar el atributo media en la etiqueta link.

El uso de display: none; en algunas de sus reglas sería una forma adecuada de manejar su situación.

Answer 3

Una manera simple:

<style> 
    .print-only{ 
     display: none; 
    } 

    @media print { 
     .no-print { 
      display: none; 
     } 

     .print-only{ 
      display: block; 
     } 
} 
</style> 

Answer 4

llegué aquí porque tenía curiosidad sobre cómo imprimir un gráfico generado por chart.js. Quería simplemente imprimir el gráfico directamente desde la página (con un botón que hace un 'window.print') sin todo el otro contenido de la página.

Entonces, me acerqué usando la técnica de la respuesta aquí: Why can't I override display property applied via an asterisk?.

Tiene que aplicar el 'asterisco' al elemento 'cuerpo', no solo. Por lo tanto, utilizando el ejemplo de CSS que el PO (Nathan) que se añade a la pregunta, he cambiado a esto:

<style type="text/css"> 
@media print { 
    body * {display:none;} 
    .printable, .printable > * { 
    display: block !important; 
    } 
} 

Luego agregó que la clase 'imprimir' a la carta en sí, como en

<canvas id="myChart" class="printable" width="400" height="400"></canvas> 

que eliminó todos los elementos de la página en la salida impresa, excepto el gráfico cuando se hace clic en el botón 'imprimir' (a través de este):

<script> 
    myChart.render(); 
    document.getElementById("printChart").addEventListener("click",function(){ 
     window.print(); 
    });  
</script> 

por lo tanto, tal vez esto ayudará a cualquier persona que llega a esta pregunta a través de las gafas.

Answer 5

que sugieren a los elementos que no se va a imprimir

HTML

<h1 class="no-print" >Welcome Just Screen</h1> 
<div> I want print this section :)</div> 
<div class="no-print">It's display only on screen</div> 

Css

@media print {  
.no-print { 
    display: none; 
}