Bestimmte Bereiche einer Internetseite drucken

Sehr benutzerfreundlich ist die Möglichkeit nur bestimmte Bereiche einer Internetseite ausdrucken zu können, also ohne Navigationsleisten oder Hintergrundbilder. Hier wird eine einfache Möglichkeit gezeigt, wie man mit Javaskript bestimmmte Bereiche einer Internetseite ausdrucken lassen kann.

Zuerst definieren wir den zu druckenden Bereich als Container-Element:

<div id=”printcontainer”>
  <p>Hier steht alles, was gedruckt werden soll…</p>
</div>

Anschließend wird mit Javaskript ein neues Fenster geöffnet und der Inhalt des Container “printcontainer” reingeschrieben. Letztendlich wird die Druckfunktion des Browsers aufrufen.

<script type=”text/javascript”>
        var win=null;
        function printContainer(printContent)
        {
          win = window.open();
          self.focus();
          win.document.open();
          win.document.write(‘<‘+’html’+’><‘+’head’+’><‘+’style’+’>’);
          win.document.write(‘body, td { font-family: Verdana; font-size: 10pt;} h1 {font-family: Verdana; font-size: 12pt;} h2 {font-family: Verdana; font-size: 10pt;}’);
          win.document.write(‘<‘+’/’+’style’+’><‘+’/’+’head’+’><‘+’body’+’>’);
          win.document.write(printContent);
          win.document.write(‘<‘+’/’+’body’+’><‘+’/’+’html’+’>’);
          win.document.close();
          win.print();
          win.close();
        }
     </script>

Und natürlich muß das Skript noch durch einen Link aufgerufen werden:

<a href=”#” onclick=”printContainer(document.getElementById(‘printcontainer’).innerHTML); return false”>Drucken</a>

Derart lassen sich beliebige Abschnitte einer Internetseite drucken und zum Beispiel auch als PDF abspeichern. Durch die Definition verschiedener Bereiche können auf einer Internetseite auch mehrere Abschnitte zum Druck freigegeben werden.

Veröffentlicht unter Programierung, Webdesign Getagged mit: ,
2 comments on “Bestimmte Bereiche einer Internetseite drucken
  1. webdesign-nrw sagt:

    Eins noch: Möchte unseren Praktikanten keinesfalls schlecht machen. Er fängt sein Studium erst an und immerhin hat er das Fenster für die Druckansicht in der Breite angepasst. Also nicht böse sein lieber Praktikant.

  2. webdesign-nrw sagt:

    Perfekt! Unser Praktikant aus der Informatikbranche hat das nach mittlerweile zwei Tagen immer noch nicht hingebracht. Oben das Beispiel mit Copy&Paste in unsere Website rein und es läuft. Danke für das Beispiel.

Hinterlasse eine Antwort

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close