1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

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

Dieses Thema im Forum "Webmaster FAQ" wurde erstellt von Andreas Gaisbauer, 5. August 2003.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Andreas Gaisbauer

    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
    Code (PHP):
    1.  
    2. <link rel="stylesheet" media="print" href="druck.css">
    3.  
    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:
    Code (PHP):
    1.  
    2. <script type="text/javascript">
    3. function printPage() {
    4.   var NP = document.getElementsByName('NoPrint');
    5.   var NPL = NP.length;
    6.  
    7.   for(var i=0; i<NPL;i++){
    8.     NP[i].style.display = 'none';
    9.   }
    10.  
    11.   window.print();
    12.  
    13.   for(var j=0; j<NPL;j++){
    14.     NP[j].style.display = 'block';
    15.   }
    16. }
    17. </script>
    18. ...
    19. <div id="test"><p>BlindTextBlindTextBlindTextBlindTextBlindTextBlindText</p></div>
    20. <div id="NoPrint" name="NoPrint"><a href="#" onClick="printPage();">Ausdruck starten</a></div>
    21. <div id="NoPrint" name="NoPrint">
    22.   BlindText BlindText BlindText BlindText <br>
    23.   BlindText BlindText BlindText BlindText
    24. </div>
    25.  
    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:

    • print.zip
      Dateigröße:
      474 Bytes
      Aufrufe:
      437
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen