Ocultar DIV al imprimir con CSS

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.

Índice

    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:

    Relacionado  Navbar bootstrap 4 con iconos y responsiva

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

    Relacionado  Imagen de fondo página completa usando HTML y CSS

    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

    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!.

    Entradas Relacionadas

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Subir