Imprimir un área específica del sitio con CSS

Alguna vez tiene que imprimir solo un área específica del sitio? Por lo tanto, Cómo delimitar esta área de impresión? CSS es la solución!

Problema

Escenario: Había ningún sitio en la pantalla, y a la derecha en medio de ella una especie de informe (datos tabulados). Cómo imprimir sólo el área que estaba interesado?

Solución

Cómo sabemos, @media impresión es una característica CSS que nos permite controlar el estilo de lo que se imprimirá. Analicemos dos situaciones.

“No imprimir”

1Caso – Imprimir todo, pero elimina una o más áreas de impresión
Cuando tienes un área que desea borrar la impresión es fácil, crear 1 1 clase en “@media impresión” oscurecimiento de visibilidad y asignar al elemento (etiqueta HTML) que no desea imprimir. En el caso siguiente, Se creó la clase .notprint y asignado a un DIV que no se debe imprimir.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!Html DOCTYPE>
<HTML>
<cabeza>
  <Título>No imprimir</Título>
  <tipo de estilo="text/css">
      @Los medios de comunicación imprimir { 
          .notprint { visibilidad:escondido; } 
      }
  </estilo>
</cabeza>
<cuerpo>
  <fuerte>Esto imprimirá!</fuerte>
  <div clase="notprint">
      Esto, no se imprimirán!
  </div> 
  Aquí también se imprimirá!             
</cuerpo>
</HTML>

“Sí impresión”

2Caso – Incluyen un solo en el área de impresión, y eliminar otra
Sin embargo, cuando el contrario, IE, Qué pasa si quiero imprimir solo un área específica, como un DIV, por ejemplo, y no quiero que el resto del sitio aparece en la impresión. Esta es la razón de este Post! Claro, También vamos a utilizar la @media impresión, sólo pensar diferente. En este caso, oculta la visibilidad de todos los (*) los elementos del sitio y, entonces, dar visibilidad sólo al elemento que desea imprimir, debidamente designados por un identificador que llamé #yesprint. Así, Podemos, por ejemplo, imprimir sólo el contenido de un DIV específico.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!Html DOCTYPE>
<HTML>
<cabeza>
  <Título>Sí impresión</Título>
  <tipo de estilo="text/css">
    @Los medios de comunicación imprimir {
      * {
        visibilidad:escondido;
      }
 
      #yesprint {
        visibilidad:visible;
        posición: absoluta;
        Arriba:0;
        izquierda:0;                                     
      }                                  
    }
  </estilo>
</cabeza>
<cuerpo>
  <fuerte>Esto no se imprimirá!</fuerte>  
  <id de la div="yesprint">
      Esto y, sólo por esta, se imprimirán!
  </div> 
  Aquí también no sale impresa!            
</cuerpo>
</HTML>

Si no el efecto deseado, Tal vez sea debido a la plantilla de conseguir estilo residual de algunos CSS anterior (padre). Trate de usar !importante o ajustar el código para forzar el resultado esperado. Vea también si hay alguna etiqueta roto, sin abrir o cerrar.

He probado esta solución en el explorador de Internet 9, Firefox 14.0.1 y cromo 21.0.1180.8. Todo parecía funcionar correctamente… Recuerde que también, Qué pasa si usted quiere imprimir colores e imágenes de fondo, Esto debe ser configurado directamente en cada navegador. Por ejemplo, en Internet Explorer, ir al menú file > page setup y habilite la opción “Imprimirlos colores e imágenes de fondo“, como la figura. En esta misma ventana, Usted puede hacer otros ajustes de impresión.

Véase también: Hacer DIV invisible para imprimir | CSS de forma diferente para la impresión de.

Eso es todo… usar bajo su propio riesgo!

Total hits: 14119

4 Comentarios sobre “Imprimir un área específica del sitio con CSS

  1. Luan da Costa dijo:

    Gracias por tu ayuda man, pero cuando al imprimir mi div no se carga el css,Incluso he creado css para imprimir . Tienen algún consejo?

    • Copiar el código exactamente como aparece en el ejemplo del Post a su servidor y prueba a ver si funciona. Intenta también poner el CSS incrustado directamente en la página (y ninguna llamada externa), sólo para propósitos de prueba. A veces, Si está utilizando código CSS de terceros (como plugins), algunas etiquetas se definen como importantes!. Use Firefox con Firebug y tratar de identificar correctamente los identificadores CSS o clases que desea modificar. Usar el puntero de Firebug para esto! Y así sucesivamente…

Contesta

Su dirección de correo electrónico no será publicado. Campos requeridos están marcados con *