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.
@media
Drucken und@media
Bildschirm. 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?@media print { .no-print, .no-print * { display: none !important; } }
<link rel="stylesheet" href="all.css" media="screen, print" type="text/css">
@media screen
wenn 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 .Bootstrap 3 hat hierfür eine eigene Klasse :
Es ist wie folgt definiert:
Sie müssen es nicht selbst definieren.
In Bootstrap 4 wurde dies geändert in:
quelle
! important
rettete mich.Die beste Vorgehensweise besteht darin , ein Stylesheet speziell zum Drucken zu verwenden und sein
media
Attribut auf festzulegenprint
.Zeigen Sie darin die Elemente an, die Sie auf Papier drucken möchten.
quelle
Hier ist eine einfache Lösung, setzen Sie dieses CSS
und hier ist der HTML
quelle
CSS-DATEI
HTML HEADER
ELEMENT
quelle
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):
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
printOption
ID (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.quelle
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".
quelle
quelle
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
und nicht nur
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.
und nicht nur das Standardmedium = "Bildschirm".
Dass ich denke, löst dieses Problem für alle.
quelle
Wenn Sie über Javascript verfügen, das die Stileigenschaft einzelner Elemente beeinträchtigt und somit überschreibt
!important
, empfehle ich, die Ereignisseonbeforeprint
und zu behandelnonafterprint
. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprintquelle