Um Elemente oder Bereiche für den Druck auszublenden, brauchen wir ein bisschen CSS. Dafür können wir das erstmal in den Head-Bereich packen, anstatt das für diese Anleitung in eine spezielle extra Datei zu schieben. Unser Grundgerüst sieht also erstmal so aus (ohne den CSS-Bereich im Head).
Logischerweise wollen wir das DIV mit dem Text "Lieber nicht drucken" verstecken, wenn man die Seite ausdrucken möchte.
1<!DOCTYPE html>
2<html lang="de">
3 <head>
4 <title>Titel</title>
5 </head>
6 <body>
7 <div>
8 Soll gedruckt werden
9 </div>
10 <div>
11 Lieber nicht drucken
12 </div>
13 </body>
14</html>
In dem Head-Bereich können wir nun den Style-Bereich für unser CSS einfügen und folgendes dort reinschreiben:
1@media print {
2 .no-print, .no-print * {
3 display: none !important;
4 }
5}
Mithilfe der Media-Queries (@print) sorgen wir dafür, dass das CSS nur beim Druck verarbeitet wird. Nun müssen wir nurnoch unserem DIV die entsprechende Klasse geben, so dass unsere HTML-Seite zum Schluss so aussieht:
1<!DOCTYPE html>
2<html lang="de">
3 <head>
4 <title>Titel</title>
5 <style>
6 @media print {
7 .no-print, .no-print * {
8 display: none !important;
9 }
10 }
11 </style>
12 </head>
13 <body>
14 <div>
15 Soll gedruckt werden
16 </div>
17 <div class="no-print">
18 Lieber nicht drucken
19 </div>
20 </body>
21</html>
In der Druckansicht, wird unser zweites DIV nun nichtmehr angezeigt.