Tenho um link na minha página web para imprimir a página web. No entanto, o link também é visível na própria impressão.
Existe javascript ou código HTML que esconderia o botão do link quando eu clicasse no link de impressão?
Exemplo:
"Good Evening"
Print (click Here To Print)
Eu quero esconder este "Print" etiqueta quando imprime o texto " Good Evening". O "Imprimir" etiqueta não deve aparecer na impressão propriamente dita.
Em sua folha de estilo adicionar:
@media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Então adicione class='no-print'
(ou adicione a classe no-print a uma declaração de classe existente) em seu HTML que você não't quer aparecer na versão impressa, como o seu botão.
A melhor prática é utilizar uma folha de estilo especificamente para impressão, e definir seu atributo media
para impressão
.
Nela, mostrar/ocultar os elementos que você quer imprimir em papel.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Bootstrap 3 tem [sua classe **own*** para isto][1] chamada:
hidden-print
É definido desta forma:
@media print {
.hidden-print {
display: none !important;
}
}
Você não precisa definir por conta própria.
Em [Bootstrap 4][2] isto mudou para:
.d-print-none
[1]: https://getbootstrap.com/docs/3.3/css/#responsive-utilities-print [2]: https://getbootstrap.com/docs/4.3/utilities/display/#display-in-print
Aqui está uma solução simples colocar este CSS
<style>
@media print{
.noprint{
display:none;
}
}
e aqui está o 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>
CSS FILE
@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>
Você poderia colocar o link dentro de um div, depois usar o JavaScript na etiqueta da âncora para esconder o div quando clicado. Exemplo (não testado, pode ser necessário afinar, mas você tem a idéia):
<div id="printOption">
<a href="javascript:void();"
onclick="document.getElementById('printOption').style.visibility = 'hidden';
document.print();
return true;">
Print
</a>
</div>
O lado negativo é que uma vez clicado, o botão desaparece e eles perdem essa opção na página (lá's sempre Ctrl+P no entanto).
A melhor solução seria criar uma folha de estilos de impressão e dentro dessa folha de estilos especificar o status oculto do ID da Opção de impressão
(ou o que quer que você lhe chame).
Você pode fazer isso na seção principal do HTML e especificar uma segunda folha de estilos com um atributo de mídia.
A resposta aceita pelo diodo não está funcionando para alguns, se não para todos nós. Eu ainda não consegui esconder o meu Imprimir este botão de sair para o papel.
O pequeno ajuste por Clint Pachl de chamar o arquivo css, adicionando
media="screen, print"
e não apenas
media="screen"
está a resolver este problema. Portanto, para maior clareza e porque não é fácil ver Clint Pachl escondendo ajuda adicional nos comentários. O usuário deve incluir o ",print" no arquivo css com a formatação desejada.
<link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">
e não a mídia padrão = "screen" apenas.
<link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">
Que eu acho que resolve este problema para todos.
Se você tem Javascript que interfere com a propriedade de estilo dos elementos individuais, sobrepondo assim !importante', eu sugiro que você trate dos eventos
antes da impressão' e `após a impressão'.
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint