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.

2 Gedanken zu „Bestimmte Bereiche einer Internetseite drucken

  1. webdesign-nrw

    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

    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.

Schreibe einen Kommentar