Como faço para ocultar um elemento ao imprimir uma página web?

votos
332

Eu tenho um link na minha página para imprimir a página. No entanto, o link também é visível na própria impressão.

Existe javascript ou código HTML que iria esconder o botão de ligação quando eu clico no link de impressão?

Exemplo:

 Good Evening
 Print (click Here To Print)

Eu quero esconder esse rótulo Imprimir quando se imprime o texto boa noite. A etiqueta Imprimir não deve mostrar no próprio impressão.

Publicado 10/12/2008 em 08:11
fonte usuário
Em outras línguas...                            


10 respostas

votos
587

Em sua folha de estilo acrescentar:

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

Em seguida, adicione class='no-print'(ou adicionar a classe não-print com um comunicado classe existente) em seu HTML que você não deseja que apareça na versão impressa, como o seu botão. Eu tenho esse para trabalhar com 'noprint' em vez de 'noprint' (minúsculas).

Respondeu 10/12/2008 em 15:02
fonte usuário

votos
153

A melhor prática é usar uma folha de estilo especificamente para a impressão e e defina seu mediaatributo para print.

Nele, mostrar / ocultar os elementos que deseja ser impresso em papel.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Respondeu 10/12/2008 em 08:23
fonte usuário

votos
107

Bootstrap 3 tem a sua própria classe para esta chamada:

hidden-print

Ela é definida como este:

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

Você não tem que defini-lo em seu próprio país.


Em Bootstrap 4 isto mudou para:

.d-print-none
Respondeu 01/04/2016 em 09:08
fonte usuário

votos
10

Aqui está uma solução simples colocar esse CSS

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

e aqui está o 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>
Respondeu 23/06/2017 em 15:00
fonte usuário

votos
10

CSS ARQUIVO

@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>
Respondeu 17/12/2015 em 09:05
fonte usuário

votos
5

A melhor coisa a fazer é criar um "print-only" versão da página.

Oh, espere ... isso não é 1999 anymore. Use um CSS de impressão com "display: none".

Respondeu 10/12/2008 em 22:42
fonte usuário

votos
5

Você poderia colocar o link dentro de uma div, em seguida, usar JavaScript na tag âncora para esconder a div quando clicado. Exemplo (não testado, pode precisar de ser ajustado, mas você começa a idéia):

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

A desvantagem é que uma vez clicado o botão desaparece e eles perdem essa opção na página (há sempre Ctrl + P embora).

A melhor solução seria a criação de uma folha de estilo de impressão e dentro desse estilo especificar o status oculto da printOptionID (ou o que você chamá-lo). Você pode fazer isso na seção principal do HTML e especificar uma segunda folha de estilo com um atributo de mídia.

Respondeu 10/12/2008 em 08:20
fonte usuário

votos
3

@media print {
  .no-print {
    visibility: hidden;
  }
}
<div class="no-print">
  Nope
</div>

<div>
  Yup
</div>

Respondeu 26/10/2017 em 23:38
fonte usuário

votos
1

Se você tem Javascript que interfere com a propriedade de estilo de elementos individuais, substituindo, assim !important, sugiro lidar com os eventos onbeforeprinte onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint

Respondeu 29/11/2018 em 09:19
fonte usuário

votos
1

A resposta aceito por diodus não está funcionando para alguns, se não todos nós. Eu não podia ainda esconder minha Imprimir este botão de sair para o papel.

O pequeno ajuste por Clint Pachl de chamar arquivo css, adicionando em

      media="screen, print" 

e não apenas

      media="screen"

é resolver este problema. Assim, para clareza e porque não é fácil de ver Clint Pachl escondida ajuda adicional nos comentários. O usuário deve incluir o "print" em css com a formatação desejada.

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

e não o media = padrão "tela" apenas.

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

Que eu acho que resolve este problema para todos.

Respondeu 28/01/2018 em 06:45
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more