css - print - ¿Cómo oculto un elemento al imprimir una página web?

imprimir html con javascript

Question

Tengo un enlace en mi página web para imprimir la página web. Sin embargo, el enlace también es visible en la impresión en sí.

¿Hay código javascript o HTML que ocultaría el botón de enlace cuando hago clic en el enlace de impresión?

Ejemplo:

 "Good Evening"
 Print (click Here To Print)

Quiero ocultar esta etiqueta "Imprimir" cuando imprima el texto "Buenas tardes". La etiqueta "Imprimir" no debe aparecer en la impresión.

Answer 1

Aquí hay una solución simple pon esta CSS.

<style>
@media print{
   .noprint{
       display:none;
   }
}

y aquí está el HTML

<div class="noprint">
    element that need to be hide when printing
</div>
<div class="noprint">
    element that need to be hide when printing
</div>

Answer 2

Archivo CSS

@media print
{
    #pager,
    form,
    .no-print
    {
        display: none !important;
        height: 0;
    }


    .no-print, .no-print *{
        display: none !important;
        height: 0;
    }
}

HTML HEADER

<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >

ELEMENTO

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

Answer 3

Bootstrap 3 tiene su propia clase para esto llamada:

hidden-print

Se define así:

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

No tienes que definirlo por tu cuenta.

En Bootstrap 4 esto ha cambiado a:

.d-print-none

Answer 4

En su hoja de estilos agregue:

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

Luego agregue class=''no-print'' (o agregue la clase no-print a una declaración de clase existente) en su HTML que no desea que aparezca en la versión impresa, como su botón. Conseguí que esto funcionara con ''noPrint'' en lugar de ''noprint'' (en minúsculas).

Answer 5

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

En él, muestra / oculta los elementos que deseas imprimir en papel.

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

Answer 6

La respuesta aceptada por diodus no funciona para algunos, si no para todos nosotros. Todavía no podía ocultar el botón Imprimir este botón para que no saliera al papel.

El pequeño ajuste por Clint Pachl de llamar a un archivo css agregando

      media="screen, print" 

y no solo

      media="screen"

esta resolviendo este problema Entonces, para mayor claridad y porque no es fácil ver la ayuda adicional oculta de Clint Pachl en los comentarios. El usuario debe incluir ", imprimir" en el archivo css con el formato deseado.

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

y no los medios por defecto = "pantalla" solamente.

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

Que creo que resuelve este problema para todos.

Answer 7

Lo mejor que se puede hacer es crear una versión "solo para imprimir" de la página.

Oh, espera ... esto ya no es 1999. Utilice un CSS de impresión con "display: none".

Answer 8

Puede colocar el enlace dentro de un div, luego usar JavaScript en la etiqueta de anclaje para ocultar el div cuando se hace clic. Ejemplo (no probado, puede necesitar ser ajustado, pero se le ocurre la idea):

<div id="printOption">
    <a href="javascript:void();" 
       onclick="document.getElementById(''printOption'').style.visibility = ''hidden''; 
       document.print(); 
       return true;">
       Print
    </a>
</div>

La desventaja es que una vez que se hace clic, el botón desaparece y pierden esa opción en la página (aunque siempre hay Ctrl + P).

La mejor solución sería crear una hoja de estilo de impresión y dentro de esa hoja de estilo especifique el estado oculto de la ID de printOption (o como se llame). Puede hacer esto en la sección principal del HTML y especificar una segunda hoja de estilo con un atributo de medios.

Answer 9

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

<div class="no-print">
  Nope
</div>

<div>
  Yup
</div>