Elemente von Website beim Druck ausblenden

Sky-Haussman · 30. März 2021

Ich möchte mir aktuell einige Seiten einer Website als PDF archivieren bzw. teilweise auch ausdrucken.
Leider gibt es auf der Seite keine extra Druckansicht.
"Seite vereinfachen" ist dort im Firefox nicht verfügbar und würde vermutlich auch erwünschte Bilder und Elemente ausblenden.

Ich kenne die DIV-IDs und Klassen der Elemente, die ich nicht im Ausdruck haben will.
Es soll eventuell die Möglichkeit geben User-Stylesheets anzuwenden, aber ich bin mir nicht sicher, inwiefern ich damit das original Stylesheet modifizeren kann.
Oder gibt es dafür eine viel simplere Möglichkeit, die ich noch nicht kenne?
Es sollte auf alle Seiten einer URL anwendbar sein, da ich mehrere Seiten drucken möchte.
Für ein bis zwei Seiten hätte ich sonst einfach die Elemente im Firefox von Hand ausblenden lassen können. Das funktioniert nämlich problemlos.

Vielen Dank für Anregungen und Hilfe.

Haumea · 30. März 2021

Sky-Haussman schrieb:
Für ein bis zwei Seiten hätte ich sonst einfach die Elemente im Firefox von Hand ausblenden lassen können. Das funktioniert nämlich problemlos.

Genau das wollte ich gerade vorschlagen. Mhh.. als ich würde mal nach einem Plugin für den Browser suchen, der das ggf. macht.
habe eben nur ganz schnell gesucht und vielleicht hilft dir das Plugin hier ja schon weiter: „Print Edit WE für Firefox“.

Nase · 30. März 2021

Konsole vom Browser öffnen, dann document.querySelectorAll("#divId1, #divId2").forEach(item => item.remove()); eingeben. Da du die Elemente ja kennst, die du entfernen möchtest, schreibst du die in den querySelectorAll als Liste rein. Entfernen von Elementen verschiebt aber ggfs. das Layout. Alternativ kannst du die auch einfach unsichtbar machen, z.B. document.querySelectorAll("img").forEach(item => item.style.opacity = 0);.

netzgestaltung · 30. März 2021

Normalerweise binde ich ein extra print style sheet ein:

HTML:

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

durch das media attribut wird es nur für drucke herangezogen.
da drin lässt sich dann bequem alles ausblenden was nicht gedruckt werden soll, beispiel:

CSS:

* {
  background-color: transparent;
}
.site-header::after,
#navigation,
#header-region,
#search-theme-form,
.site-footer .menu,
.breadcrumb,
.tabs,
.feed-icon,
.links {
  display: none;
}
a:hover, a:active, a:link, a:visited {
  color: black;
}

/* CSS2 selector to add visible href after links. */
#content a:link:after, #content a:visited:after {
  content: " (" attr(href) ") ";
  font-size: 0.8em;
  font-weight: normal;
}

interessant auch das für links das href attribut ausgegeben werden kann.

achso du hast keinen zugriff auf die Seiten guten morgen

du kannst zb im Firefox auf "untersuchen" gehen und das in der Stilbearbeitung bei der letzten Datei unten einfügen

Suche

Elemente von Website beim Druck ausblenden

Sky-Haussman

Newbie

Haumea

Cadet 3rd Year

Nase

Gast

netzgestaltung

Captain

Ähnliche Themen