Ik heb een link op mijn webpagina om de webpagina af te drukken. De link is echter ook zichtbaar in de afdruk zelf.
Bestaat er javascript of HTML code die de linkknop zou verbergen wanneer ik op de print link klik?
Voorbeeld:
"Good Evening"
Print (click Here To Print)
Ik wil dit "Print" label verbergen wanneer de tekst "Goedenavond" wordt afgedrukt. Het "Print" label moet niet op de afdruk zelf te zien zijn.
Voeg in je stylesheet toe:
@media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Voeg dan class='no-print'
toe (of voeg de no-print class toe aan een bestaande class statement) in je HTML die je niet in de gedrukte versie wilt hebben, zoals je knop.
Het beste is om een stijlblad te gebruiken dat speciaal voor afdrukken is bedoeld, en het media
attribuut op print
te zetten.
Toon/verberg daarin de elementen die u op papier afgedrukt wilt hebben.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Je zou de link binnen een div kunnen plaatsen, en dan JavaScript gebruiken op de anchor tag om de div te verbergen als erop geklikt wordt. Voorbeeld (niet getest, moet misschien aangepast worden, maar je krijgt het idee):
<div id="printOption">
<a href="javascript:void();"
onclick="document.getElementById('printOption').style.visibility = 'hidden';
document.print();
return true;">
Print
</a>
</div>
Het nadeel is dat eens erop geklikt, de knop verdwijnt en men die optie op de pagina verliest (er'is echter altijd Ctrl+P).
De betere oplossing zou zijn om een print stylesheet te maken en binnen die stylesheet de verborgen status van de printOption
ID (of hoe je het ook noemt) te specificeren. Je kunt dit doen in de head sectie van de HTML en een tweede stylesheet specificeren met een media attribuut.