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

Diese Website nutzt Cookies, um unseren Besuchern die bestmögliche Funktionalität bieten zu können. Durch die weitere Nutzung unserer Seiten erklären Sie sich mit dem Einsatz von Cookies einverstanden. Erfahren Sie mehr zum Einsatz von Cookies und dem Umgang mit Ihren persönlichen Daten in unserer: Datenschutzerklärung

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen", um Ihnen das beste Surferlebnis möglich zu geben. Wenn Sie diese Website ohne Änderung Ihrer Cookie-Einstellungen zu verwenden fortzufahren, oder klicken Sie auf "Akzeptieren" unten, dann erklären Sie sich mit diesen.

Schließen