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.
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-printEn 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-noneTercera 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.
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.
