Wie kann ich ein Element beim Drucken einer Webseite ausblenden?

Question

Ich habe auf meiner Webseite einen Link zum Drucken der Webseite. Der Link ist jedoch auch auf dem Ausdruck selbst sichtbar.

Gibt es einen Javascript- oder HTML-Code, der den Link-Button ausblendet, wenn ich auf den Druck-Link klicke?

Beispiel:

 "Good Evening"
 Print (click Here To Print)

Ich möchte dieses Etikett "Drucken" ausblenden, wenn der Text "Guten Abend" gedruckt wird. Das Etikett "Drucken" soll nicht auf dem Ausdruck selbst erscheinen.

Answer 1

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 nach dem Anklicken verschwindet 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 verborgenen Status der printOption ID (oder wie immer Sie es nennen). Sie können dies im Head-Abschnitt der HTML-Datei tun und ein zweites Stylesheet mit einem Media-Attribut angeben.

Answer 2

@media print {
  .no-print {
    visibility: hidden;
  }
}

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

<div>
  Yup
</div>

Answer 3

Am besten ist es, eine "Nur-Druck"-Version der Seite zu erstellen.

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

Answer 4

Die von Diodus akzeptierte Antwort funktioniert für einige, wenn nicht alle von uns nicht. Ich konnte meine "Print this"-Taste nicht mehr vor dem Ausdrucken auf Papier verstecken.

Die kleine Anpassung von Clint Pachl beim Aufruf der css-Datei durch Hinzufügen von

      media="screen, print" 

und nicht nur

      media="screen"

ist die Lösung dieses Problems. Aus Gründen der Klarheit und weil es nicht leicht zu sehen ist, hat Clint Pachl zusätzliche Hilfe in Kommentaren versteckt. Der Benutzer sollte das ",print" in die css-Datei mit der gewünschten Formatierung einfügen.

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

und nicht das Standardmedium = "nur Bildschirm".

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

Ich denke, damit ist dieses Problem für alle gelöst.

Answer 5

Wenn Sie Javascript haben, das in die Stileigenschaft einzelner Elemente eingreift und damit die !important schlage ich vor, die Ereignisse zu behandeln onbeforeprint y onafterprint . https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint