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

In Ihrem Stylesheet hinzufügen:

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

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

Answer 2

Bootstrap 3 hat seine eigene Klasse für diese genannt:

hidden-print

Sie ist wie folgt definiert:

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

Sie müssen es nicht selbst definieren.

---

Unter Bootstrap 4 y Bootstrap5 wurde dies geändert in:

.d-print-none

Answer 3

Die beste Praxis ist, dass eine Formatvorlage speziell für den Druck verwenden und und setzen seine media Attribut zu print .

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

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

Answer 4

Hier ist eine einfache Lösung Setzen Sie dieses CSS

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

und hier ist der HTML-Code

<div class="noprint">
    element that need to be hidden when printing
</div>

Answer 5

CSS-DATEI

@media print
{
    #pager,
    form,
    .no-print
    {
        display: none !important;
        height: 0;
    }

    .no-print, .no-print *{
        display: none !important;
        height: 0;
    }
}

HTML-KOPFZEILE

<link href="http://stackoverflow.com/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >

ELEMENT

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