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


Status
Nicht offen für weitere Antworten.

Andreas Gaisbauer

Erfahrenes Mitglied
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
PHP:
<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:
PHP:
<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)
 

Anhänge

Status
Nicht offen für weitere Antworten.

Neue Beiträge