[CSS] Wie kann ich eine Druckversion meiner Seiten erstellen?

[Andreas Gaisbauer]

Wie kann ich eine Druckversion meiner Seiten erstellen?


Dafür gibt es mehrere Möglichkeiten:

1) CSS Lösung:
Wir legen ein zweites Stylesheet an, z.B. "Druck.css". Dieses Binden wir in den zu druckenden Dokumenten ein via

<link rel="stylesheet" media="print" href="druck.css">

ein. In CSS2 gibt es vielfältige Möglichkeiten das Drucklayout zu beeinflussen.

Links:
Möglichkeiten mit CSS2: http://www.selfhtml.net/css/eigenschaften/printlayouts.htm
CSS2 PagedMedia: http://www.w3.org/TR/CSS2/page.html

Falls es auf der Seite Elemente gibt, die nicht gedruckt werden sollen (z.B. Flashmovies), so werden diese verborgen.
Dazu muss in der "druck.css" eine Klasse .noprint { display:none; } definiert werden. Sämtliche Elemente die nicht gedruckt werden sollen, kommen in einen solchen "Container" z.B. <span class="noprint"> FLASHMOVIE </span>


2) Javascript Lösung:

<script type="text/javascript">
function printPage() {
  var NP = document.getElementsByName('NoPrint');
  var NPL = NP.length;

  for(var i=0; i<NPL;i++){
    NP[i].style.display = 'none';
  }

  window.print();

  for(var j=0; j<NPL;j++){
    NP[j].style.display = 'block';
  }
}
</script>
...
<div id="test"><p>BlindTextBlindTextBlindTextBlindTextBlindTextBlindText</p></div>
<div id="NoPrint" name="NoPrint"><a href="#" onClick="printPage();">Ausdruck starten</a></div>
<div id="NoPrint" name="NoPrint">
  BlindText BlindText BlindText BlindText <br>
  BlindText BlindText BlindText BlindText
</div>

Noch ein Tipp: Zum Testen der Druckfunktionen würde ich empfehlen, einen PDF Druckertreiber zu installlieren - das spart Papier und schont die Umwelt.
Freepdf: http://shbox.de/freepdf.htm (Freeware)
PDF Creator: http://sourceforge.net/projects/pdfcreator/ (GPL)