Ocultar DIV al imprimir con CSS

Ocultar DIV al imprimir con CSS. En algún momento cuando estamos desarrollando necesitamos crear comprobantes, boletas, recibos o cualquier otro elemento usado la web. Sin embargo, cuando enviamos a la impresora imprime todos los elementos incluso DIV o botones que no deseamos imprimir.

Ocultar DIV al imprimir con CSS

Además, sabemos que el usuario utiliza diversos tipos de impresora incluso las térmicas o quizá usan el llamado a window.print(), entonces tenemos que validar y que más que usar CSS para estos detalles.

Relacionado  Navbar bootstrap 4 con iconos y responsiva

3 formas para ocultar elementos al imprimir

  • Primera forma: Declarar estilos en línea
  • Segunda forma: Ocultar elementos en Bootstrap
  • Tercera forma: Usar archivo CSS externo

A continuación, detallaremos 3 formas para elementos al imprimir usando CSS

Primera forma: Declarar estilos en línea

Pero dejando atrás todo eso, nos encontraremos siempre con que necesitaremos que algunas partes se vean en la impresión, y otras que no. Esto lo podemos hacer usando CSS de la siguiente manera:

En su hoja de estilo agregue:

@media print
{
.no-print, .no-print *
{
display: none !important;
}
}

Luego agregue class='no-print' (o agregue la clase sin impresión a una declaración de clase existente) en su HTML que no desea que aparezca en la versión impresa, como su botón.

Segunda forma: Ocultar elementos en Bootstrap

Si estas usando el framework Bootstrap 3, recuerda que tiene su propia clase para esto llamada y la clase se llama:

hidden-print

En el archivo CSS de BootStrap lograras observar lo siguiente y se define así:

@media print {
.hidden-print {
display: none !important;
}
}

Nota:
Si estas usando el framework en sus diferentes versiones no tienes que definirlo por tu cuenta porque este framework ya viene integrado la opción de ocultar elementos en impresión, solo debes de buscar la clase en su repositorio.

Bootstrap 4 y Bootstrap5 ocultar elementos para imprimir

Si estas usando versiones actuales debes saber que en Bootstrap 4 y Bootstrap5 esto ha cambiado a lo siguiente:

.d-print-none

Tercera forma: Usar archivo CSS externo

La mejor práctica es usar una hoja de estilo específicamente para imprimir y configurar su atributo de medios para imprimir.

Relacionado  Ajustar una imagen a un div: Ejemplo completo
Relacionado  Imagen de fondo página completa usando HTML y CSS

En él, muestra/oculta los elementos que quieres que se impriman en papel.

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

Otras alternativas tenemos a esta otra opción que también es valido

@media print {
.no-print {
visibility: hidden;
}
}

Agregar la clase a un DIV HTML

<div class="no-print">
Contenido 1
</div>

<div>
Contenido 2
</div>

Conclusión

En este articulo hemos aprendido a ocultar cualquier elemento que tengamos en un archivo HTML cuando deseamos imprimir.

Hemos usado CSS para lograr nuestro objetivo y nos hemos apoyado en la regla @media print del CSS que funciona muy bien a la hora de imprimir.

Espero que este articulo les ayude en sus proyectos web.

Ver Demostración

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 5 / 5. Recuento de votos: 1

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Nestor Tapia

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Estaremos encantados de escuchar lo que piensas

Deje una respuesta

BaulPHP
Logo
Shopping cart