Wie verstecke ich ein Element beim Drucken einer Webseite?

Ich habe einen Link auf meiner Webseite, um die Webseite zu drucken. Der Link ist jedoch auch im Ausdruck selbst sichtbar.

Gibt es Javascript oder HTML-Code, der die Link-Schaltfläche ausblendet, wenn ich auf den Druck-Link klicke?

Beispiel:

 "Good Evening"
 Print (click Here To Print)

Ich möchte dieses "Drucken" -Label ausblenden, wenn der Text "Guten Abend" gedruckt wird. Das Etikett "Drucken" sollte nicht auf dem Ausdruck selbst angezeigt werden.

Fügen Sie in Ihrem Stylesheet Folgendes hinzu:

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

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

Bootstrap 3 hat hierfür eine eigene Klasse :

hidden-print

Es ist wie folgt definiert:

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

Sie müssen es nicht selbst definieren.

In Bootstrap 4 wurde dies geändert in:

.d-print-none

Die beste Vorgehensweise besteht darin , ein Stylesheet speziell zum Drucken zu verwenden und sein mediaAttribut auf festzulegen print.

Zeigen Sie darin die Elemente an, die Sie auf Papier drucken möchten.

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

Hier ist eine einfache Lösung, setzen Sie dieses CSS

@media print{
   .noprint{
       display:none;
   }
}

und hier ist der 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-DATEI

@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" >

ELEMENT

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

Sie können den Link in einem Div platzieren und dann JavaScript auf dem Ankertag verwenden, um das Div auszublenden, wenn Sie darauf klicken. Beispiel (nicht getestet, muss möglicherweise angepasst werden, aber Sie haben 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 nach dem Klicken die Schaltfläche verschwindet und diese Option auf der Seite verloren geht (es gibt jedoch immer Strg + P).

Die bessere Lösung wäre, ein Druck-Stylesheet zu erstellen und in diesem Stylesheet den verborgenen Status der printOptionID (oder wie auch immer Sie es nennen) anzugeben . Sie können dies im Kopfbereich des HTML-Codes tun und ein zweites Stylesheet mit einem Medienattribut angeben.

Am besten erstellen Sie eine "Nur-Druck" -Version der Seite.

Oh, warte ... das ist nicht mehr 1999. Verwenden Sie ein Druck-CSS mit "display: none".

Die akzeptierte Antwort von Diodus funktioniert bei einigen, wenn nicht allen von uns nicht. Ich konnte meine Schaltfläche "Diesen Drucken" immer noch nicht verbergen, um auf Papier zu gelangen.

Die kleine Anpassung von Clint Pachl an das Aufrufen der CSS-Datei durch Hinzufügen

      media="screen, print" 

und nicht nur

      media="screen"

löst dieses Problem. Aus Gründen der Klarheit und weil es nicht leicht zu sehen ist, dass Clint Pachl zusätzliche Hilfe in Kommentaren versteckt hat. Der Benutzer sollte das ", print" in die CSS-Datei mit der gewünschten Formatierung aufnehmen.

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

und nicht nur das Standardmedium = "Bildschirm".

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

Dass ich denke, löst dieses Problem für alle.

Wenn Sie über Javascript verfügen, das die Stileigenschaft einzelner Elemente beeinträchtigt und somit überschreibt !important, empfehle ich, die Ereignisse onbeforeprintund zu behandeln onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint