Bestimmte Bereiche einer Website drucken mit Javascript

Mit einem kleinen Javascript lassen sich beliebige Bereiche einer Internetseite drucken.

Der zu druckende Bereich bekommt eine ID:

<div id="print-container">
    Print this content...
</div>

Als nächsten Schritt definieren wir eine Funktion in Javascript, welche ein Windows-Objekt generiert:

<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: 12pt;} .tip-wrap {float: left; margin-left: 20px;} .clear {clear: both;}');
        win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');
        win.document.write(printContent);
        win.document.write('<'+'p'+'>');
        win.document.write('Sponsored by www.it-systemdesign-enders.de');
        win.document.write('<'+'/'+'p'+'>');
        win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
        win.document.close();
        win.print();
        win.close();
    }
</script>

Letztendlich wird noch ein Link benötigt, welcher die Javascript-Funktion aufruft:

<a href="#" onclick="printContainer(document.getElementById('print-container').innerHTML); return false">print</a>

Der komplette Code als Html:

<!DOCTYPE html>
<html>
<head>
<title>print content</title>
</head>
<body>
<!-- begin - print from container 'content-wrap-right-bottom' -->
<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: 12pt;} .tip-wrap {float: left; margin-left: 20px;} .clear {clear: both;}');
        win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');
        win.document.write(printContent);
        win.document.write('<'+'p'+'>');
        win.document.write('Sponsored by www.it-systemdesign-enders.de');
        win.document.write('<'+'/'+'p'+'>');
        win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
        win.document.close();
        win.print();
        win.close();
    }
</script>
<a href="#" onclick="printContainer(document.getElementById('print-container').innerHTML); return false">print</a>
<!-- end - print from container 'content-wrap-right-bottom' -->
<div id="print-container">
    Print this content...
</div>
</div>
</body>
</html>
Veröffentlicht unter Javascript, Programierung

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