Wie kann ich ein Element beim Drucken einer Webseite ausblenden?

In Ihrem Stylesheet hinzufügen:

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

Fügen Sie dann class='no-print' (oder fügen Sie die no-print-Klasse zu einer bestehenden Klassenanweisung hinzu) in Ihrem HTML-Code ein, der in der gedruckten Version nicht erscheinen soll, z. B. Ihre Schaltfläche.

Am besten ist es, eine Stilvorlage speziell für den Druck zu verwenden und das Attribut media auf print zu setzen.

Blenden Sie darin die Elemente ein/aus, die auf Papier gedruckt werden sollen.

Sie könnten den Link in einem div platzieren und dann JavaScript für den Anker-Tag verwenden, um das div auszublenden, wenn es angeklickt wird. Beispiel (nicht getestet, muss möglicherweise angepasst werden, aber Sie verstehen die Idee):

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

Der Nachteil ist, dass die Schaltfläche verschwindet, sobald sie angeklickt wird, und die Option auf der Seite nicht mehr zur Verfügung steht (es gibt aber immer noch Strg+P).

Die bessere Lösung wäre, ein Druck-Stylesheet zu erstellen und in diesem Stylesheet den versteckten Status der ID "printOption" (oder wie auch immer Sie sie nennen) anzugeben. Sie können dies im Head-Bereich des HTML-Satzes tun und ein zweites Stylesheet mit einem Media-Attribut angeben.