Como esconder um elemento ao imprimir uma página web?
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.
9 answers
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).
A melhor prática é usar uma folha de estilo especificamente para imprimir , e definir o seu atributo media
para print
.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
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
<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>
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>
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".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.
@media print {
.no-print {
visibility: hidden;
}
}
<div class="no-print">
Nope
</div>
<div>
Yup
</div>
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.