Como esconder um elemento ao imprimir uma página web?

Question

Como esconder um elemento ao imprimir uma página web?

Tenho um link na minha página para imprimir a página. No entanto, o link também é visível na impressão em si.

Existe algum código javascript ou HTML que possa esconder o botão de ligação quando eu carregar na ligação de impressão?

Exemplo:

 "Good Evening"
 Print (click Here To Print)

quero esconder esta etiqueta " imprimir "quando imprimir o texto"Boa Noite". A etiqueta "Print" não deve aparecer na impressão em si.

353

css printing

Author: 9 revs, 5 users 50%sourav , 2008-12-10

Source

9 answers

score 618 · Answer 1

Na sua 'stylesheet' adicione:

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

Depois adicione class='no-print' (ou adicione a classe sem impressão a uma instrução de classe existente) no seu HTML que não deseja aparecer na versão impressa, como o seu botão. Consegui isto para trabalhar com "noPrint" em vez de "noprint" (minúsculas).

score 157 · Answer 2

A melhor prática é usar uma folha de estilo especificamente para imprimir , e definir o seu atributo media para print.

Nele, mostre / esconda os elementos que deseja imprimir em papel.

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

score 120 · Answer 3

Bootstrap 3 has its own class for this called:

hidden-print

É definido assim:

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

Você não tem que defini-lo sozinho.

Em Bootstrap 4 {[8] } isto mudou para:

.d-print-none

score 18 · Answer 4

Aqui está uma solução simples. coloque este 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>

score 10 · Answer 5

FICHEIRO CSS

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


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

CABEÇALHO 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>

score 5 · Answer 6

A melhor coisa a fazer é criar uma versão da Página "imprimir apenas".

Espera... já não estamos em 1999. Use um CSS de impressão com "display: none".

score 5 · Answer 7

Você pode colocar a ligação dentro de um div, em seguida, use JavaScript na marca de âncora para esconder o div quando clicado. Exemplo (não testado, pode precisar de ser alterado, mas você tem a ideia):

<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 carregado, o botão desaparece e eles perdem essa opção na página (há sempre Ctrl+P embora).

A melhor solução seria criar uma 'stylesheet' de impressão e, dentro dessa 'stylesheet', indicar o estado oculto do ID printOption (ou seja lá como lhe chama). Você pode fazer isso na seção cabeça do HTML e especificar uma segunda folha de estilo com um atributo de mídia.

score 3 · Answer 8

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

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

<div>
  Yup
</div>

3

Author: Mike Rapadas, 2017-10-26 23:38:27

score 1 · Answer 9

A resposta aceite por diodus não está a funcionar para alguns, se não para todos nós. Não consegui esconder a minha impressão digital deste botão de sair para o papel.

O pequeno ajuste de Clint Pachl de ligar para o ficheiro css adicionando

      media="screen, print"

E não apenas

      media="screen"

Está a resolver este problema. Então, para clareza e porque não é fácil ver Clint Pachl escondido ajuda adicional em comentários. O Usuário deve incluir o", print " no arquivo css com o desejado a formatar.

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

E não a mídia padrão = "tela" apenas.

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

Acho que resolve este problema para todos.