¿Cómo escondo un elemento cuando imprimo una página web?

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

¿Hay algún código JavaScript o HTML que oculte 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 imprime el texto “Buenas tardes”. La etiqueta “Imprimir” no se debe mostrar en la copia impresa.

En su hoja de estilo, agregue:

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

Luego agregue class='no-print' (o agregue la clase no-print a una statement de clase existente) en su HTML que no desea que aparezca en la versión impresa, como su botón. Lo hice funcionar con ‘noPrint’ en lugar de ‘noprint’ (minúscula).

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

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

  

Bootstrap 3 tiene su propia clase para esto llamada:

 hidden-print 

Se define así:

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

No tiene que definirlo por su cuenta.


En Bootstrap 4 esto ha cambiado a:

 .d-print-none 

Aquí hay una solución simple poner este CSS

  

y aquí está el HTML

 
element that need to be hide when printing
element that need to be hide when printing

ARCHIVO CSS

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

ENLACE HTML

  

ELEMENTO

 

Lo mejor que puedes hacer es crear una versión de la página “solo para imprimir”.

Oh, espera … esto ya no es 1999. Use un CSS de impresión con “display: none”.

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

  

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 especificar el estado oculto de la identificación de printOption 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 multimedia.

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

La respuesta aceptada por Diodus no está funcionando para algunos, sino para todos nosotros. Todavía no podía ocultar mi Imprimir este botón de salir al papel.

El pequeño ajuste de Clint Pachl de llamar al archivo css añadiendo

  media="screen, print" 

y no solo

  media="screen" 

está resolviendo este problema Entonces, para mayor claridad y porque no es fácil ver a Clint Pachl ocultando ayuda adicional en los comentarios. El usuario debe incluir “, imprimir” en el archivo CSS con el formato deseado.

   

y no el medio predeterminado = “pantalla” solamente.

   

Eso creo que resuelve este problema para todos.