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

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