Wie verstecke ich ein Element beim Drucken einer Webseite?

440

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.

Sourav
quelle

Antworten:

743

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.

Diodeus - James MacFarlane
quelle
17
Diese Antwort ist nicht vollständig. Sie müssen zwei Medienabschnitte haben. @mediaDrucken und @mediaBildschirm. Im Druckbereich platzieren Sie Ihre Stile zum Drucken. Im Bildschirmbildschirm platzieren Sie Ihre Stile für den Siebdruck. Sie können sogar mehrere Bildschirmabschnitte für unterschiedliche Auflösungen haben. Grundsätzlich funktioniert es nicht, wenn Sie nur hinzufügen, was in dieser Antwort angegeben ist. Glauben Sie mir, ich habe es versucht. Wie kam es zu 69 positiven Stimmen?
Codeguy007
6
Tatsächlich funktioniert es, wenn Sie nur den angegebenen Code verwenden. Ich habe es gerade in Firefox versucht. Zumindest in modernen Browsern ist dies die Lösung.
Luschn
8
Ich habe versucht, ein <div> mit mehreren Unterelementen darin auszublenden. Das Problem war, dass einige Elemente auf dem Druck noch sichtbar waren. Die Lösung bestand darin, dieses CSS zu verwenden:@media print { .no-print, .no-print * { display: none !important; } }
Philipp
6
Dies kann je nach angegebenem Medium funktionieren oder nicht. Um beispielsweise sowohl Bildschirm- als auch Druckstile in einem Stylesheet zu kombinieren und dann Medienabfragen in diesem Stylesheet zu verwenden, müssen Sie, wie in dieser Antwort angegeben, sowohl Medientypen "Bildschirm" als auch "Druck" angeben:<link rel="stylesheet" href="all.css" media="screen, print" type="text/css">
Clint Pachl
5
@ Codeguy007: Ich verstehe deinen Standpunkt nicht. Sie benötigen dies nur, @media screenwenn Sie Nur-Bildschirm-Stile definieren möchten. Dies ist hier jedoch nicht der Fall: Standardmäßig werden alle Elemente angezeigt. Wenn Sie ein Nur-Druck-Format definieren, das das Element verbirgt, ist dies vollkommen ausreichend, damit es weiterhin auf dem Bildschirm angezeigt wird .
Chiccodoro
173

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
Bijan
quelle
Großartige Bootstrap 4-Lösung. Klappt wunderbar.
Diego Victor de Jesus
Ich kann nicht glauben, wie ich die Bootstrap-Lösung bis jetzt verpasst habe. Danke!
ReturnTable
! importantrettete mich.
Evan Hu
167

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" />
Andreas Grech
quelle
9
Hier sollten Sie auch CSS haben, um keinen anderen Wrapper-Inhalt anzuzeigen, die Schriftfamilie auf einen besseren Wert zu ändern und Breiten zu entfernen, um die Seite vollständig nutzen zu können. Wenn Sie Ihr Haupt-Stylesheet auf media = "screen" setzen, können Sie Ihr Print-Stylesheet als neue Wiedergabe behandeln.
Steve Perks
2
Absolut. Und mit diesem Ansatz können Sie entweder einfach "Klicken Sie hier für eine druckbare Version" entfernen oder "Diese Seite ist druckerfreundlich" oder ähnliches hinzufügen. Gute Praxis ist, wie Steve Perks sagte, alle unnötigen Inhalte wie Navigation, Anzeigen und dergleichen zu entfernen. Schließen Sie nur den primären Inhalt der Seite ein.
Arve Systad
39

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>
Nesar Nori
quelle
3
Eine Klasse wäre hier die bessere Wahl als eine ID, aus dem einfachen Grund, dass Sie diese Regel nur auf eine Sache pro Seite anwenden können, wenn Sie eine ID verwenden. Mit einer Klasse können Sie sie überall dort anwenden, wo sie benötigt wird.
Nick F
12

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>
user3806549
quelle
10

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.

Justin Scott
quelle
6

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

Jay R.
quelle
1
Druckbare Versionen haben immer noch einen gewissen Wert, da sie dem Benutzer klar anzeigen, was er beim Drucken erhält, was mit CSS-Techniken missbraucht werden kann
annakata
1
Darüber hinaus können Sie zusätzliche Inhalte in eine Druckversion einfügen, z. B. Linkreferenzen, Fußzeilen usw. In den kommenden Tagen wird ein Großteil davon jedoch auch über CSS erreichbar sein.
Steve Perks
8
@annakata: Der Benutzer kann dies bereits über "Seitenansicht" in seinem Browser abrufen. Als Bonus ist es eigentlich das, wofür es ist.
rekursiv
5

@media print {
  .no-print {
    visibility: hidden;
  }
}
<div class="no-print">
  Nope
</div>

<div>
  Yup
</div>

Mike Rapadas
quelle
3

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.

Bahnen
quelle