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


440

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 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 imprime el texto "Buenas noches". La etiqueta "Imprimir" no debe aparecer en la impresión misma.

Respuestas:


743

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.


17
Esta respuesta no está completa. Tienes que tener dos secciones de medios. @mediaimpresión y @mediapantalla. En la sección de impresión, coloca sus estilos para imprimir. En la sección de pantalla de la pantalla, coloca sus estilos para la impresión de pantalla. Incluso puede tener múltiples secciones de pantalla para diferentes resoluciones. Básicamente, si solo agrega lo que se da en esta respuesta, no funcionará. Créeme que lo he intentado. Entonces, ¿cómo obtuvo esto 69 votos a favor?
Codeguy007

66
en realidad, funciona si solo usas el código que se da. Acabo de intentarlo en Firefox. Entonces, al menos en los navegadores modernos, esta es la solución.
luschn

8
Intenté ocultar un <div> con varios subelementos dentro. El problema era que algunos elementos aún eran visibles en la impresión. La solución fue utilizar este CSS:@media print { .no-print, .no-print * { display: none !important; } }
Philipp

66
Esto puede o no funcionar dependiendo de los medios especificados. Por ejemplo, para combinar estilos de pantalla e impresión en una hoja de estilo, luego use consultas de medios dentro de esa hoja de estilo, como sugiere esta respuesta, debe especificar los tipos de medios de "pantalla" e "imprimir":<link rel="stylesheet" href="all.css" media="screen, print" type="text/css">
Clint Pachl

55
@ Codeguy007: No entiendo tu punto. Solo necesita @media screensi desea definir estilos de solo pantalla, pero este no es el caso aquí: de forma predeterminada, se muestran todos los elementos, y al definir un estilo de solo impresión que oculta el elemento es perfectamente suficiente para que todavía aparezca en la pantalla .
chiccodoro


168

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

En él, muestre / oculte los elementos que desea imprimir en papel.

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

99
Aquí también debe tener css para no mostrar otro contenido de contenedor, cambiar la familia de fuentes a un mejor valor, eliminar anchos para permitir el uso completo de la página. Si configura su hoja de estilo principal en media = "pantalla", puede tratar su hoja de estilo de impresión como un nuevo playgound.
Steve Perks

2
Absolutamente. Y con este enfoque, puede eliminar "Haga clic aquí para obtener una versión imprimible" o agregar "Esta página es fácil de imprimir" o similar. Una buena práctica es, como dijo Steve Perks, eliminar todo el contenido innecesario como navegación, anuncios y similares. Incluya solo el contenido principal de la página.
Arve Systad

39

Aquí hay una solución simple poner este CSS

@media print{
   .noprint{
       display:none;
   }
}

y aquí está el HTML

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

3
Una clase sería una mejor opción que una identificación aquí, por la sencilla razón de que si usa una identificación, solo puede aplicar esta regla a una cosa por página. Una clase le permitiría aplicarlo donde sea necesario.
Nick F

12

ARCHIVO CSS

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


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

Encabezado HTML

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

10

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 ser necesario modificarlo, pero se entiende 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 especificar el estado oculto de la printOptionID (o como se llame). Puede hacerlo en la sección de encabezado del HTML y especificar una segunda hoja de estilo con un atributo multimedia.


6

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

Oh, espera ... esto ya no es 1999. Use una impresión CSS con "display: none".


1
todavía hay algún valor en versiones imprimibles, ya que claramente muestra al usuario lo que obtendrá cuando imprimen los que se puede abusar con las técnicas CSS
annakata

1
Además de eso, puede incluir contenido adicional en una versión impresa, como referencias de enlaces, pies de página, etc. Sin embargo, en los próximos días, se podrá lograr mucho de esto a través de CSS.
Steve Perks

8
@annakata: El usuario ya puede obtener eso usando "Vista previa de impresión" en su navegador. Como beneficio adicional, en realidad es para eso.
recursivo


3

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

El pequeño ajuste por Clint Pachl de llamar al archivo CSS agregando

      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, ocultó ayuda adicional en los comentarios. El usuario debe incluir el ", imprimir" en el archivo CSS con el formato deseado.

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

y no solo el medio predeterminado = "pantalla".

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

Eso creo que resuelve este problema para todos.


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.