Print Specific Part of Webpage

Print specific part of webpage

You can use simple JavaScript to print a specific div from a page.

var prtContent = document.getElementById("your div id");
var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();

How do I print part of a rendered HTML page in JavaScript?

I would go about it somewhat like this:

<html>
    <head>
        <title>Print Test Page</title>
        <script>
            printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">')
            function printDiv(divId) {
                window.frames["print_frame"].document.body.innerHTML=printDivCSS + document.getElementById(divId).innerHTML;
                window.frames["print_frame"].window.focus();
                window.frames["print_frame"].window.print();
            }
        </script>
    </head>

    <body>
        <h1><b><center>This is a test page for printing</center></b><hr color=#00cc00 width=95%></h1>
        <b>Div 1:</b> <a href="javascript:printDiv('div1')">Print</a><br>
        <div id="div1">This is the div1's print output</div>
        <br><br>
        <b>Div 2:</b> <a href="javascript:printDiv('div2')">Print</a><br>
        <div id="div2">This is the div2's print output</div>
        <br><br>
        <b>Div 3:</b> <a href="javascript:printDiv('div3')">Print</a><br>
        <div id="div3">This is the div3's print output</div>
        <iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
    </body>
</html>

how to print specific part of webpage using node-jade template engine

Solution
After searching and reading lot of solutions on so, i found that it is pretty simple and nothing to do with jade or javascript and done using css.

Here is how:
Solution on SO

Thanks Stack overflow.

How to print some specific part of a page via window.print()

Use css to hide elements you don't want to print:

@media print {
    .control-group {
      display: none;
    }
}

PHP print specific part of page

Use javascript's window.print() in normal cases where javascript is enabled, and simply add a <noscript> tag to tell the user that they have to enable javascript in order to print.

Something like this:

<noscript>Please enable javascript in order to print the page.</noscript>

How can I print a certain block/part of a web page?

Use css, with the media = print option.

Like:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

The blocks you don't want printed can set display:none.

Print Specific Part of Webpage