How to Print Only Parts of a Page

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 to print only parts of a page?

IE supports onbeforeprint and onafterprint, but what you really want is a print stylesheet.

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

How to print only a specific page part?

You can use the * selector in combination with immediate child >

.main > * {       /* Basically the sections */
  display: none; 
}

.main > .print {
  display: initial;
}

The above is not flexible like specifically defining what to hide - since it'll work for immediate child only.

How to print a part from a page?

Wrap your print_f4 in a div with class called "hide-from-print" and use the following CSS:

//CSS

@media print {
  .hide-from-print { 
      display: none !important; 
  }
}

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;
    }
}

How to only show certain parts with CSS for Print?

Start here. But basically what you are thinking is the correct approach.

Thanks, Now my question is actually
becoming: How do I apply CSS to a
class AND ALL OF ITS DESCENDANT
ELEMENTS? So that I can apply
"display:block" to whatever is in the
"printable" zones.

If an element is set to display:none; all its children will be hidden as well. But in any case. If you want a style to apply to all children of something else, you do the following:

.printable * {
   display: block;
}

That would apply the style to all children of the "printable" zone.

How to print certain classes only when I using ctrl+p for print

I am unsure how free you are with WordPress, but, if you are able to implement your own CSS (since you used it as a tag), you can use a media query to exclude/include classes when the user prints the page. @media print targets the print style of the page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test.html</title>
    <link rel="stylesheet" href="test.css" />
</head>
<body>
    <p class="c1">class 1</p>
    <p class="c2">class 2</p>
    <p class="c3">class 3</p>
</body>
</html>

@media print {
    .c2 {
        display: none;
    }
}

Web View:

web page saying class 1, 2, and 3 on 3 separate lines

Print View:

web page saying class 1 and 3 on 2 separate lines

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>

Printing Specific Part of HTML document

I just have to add

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

in my head part of the page

print.css is as below

body {visibility:hidden;}

.print {visibility:visible;}

Also we had to assign class="print" to to html element which we want to print

Thanks to @Clay