How to Print Part of a Rendered HTML Page in JavaScript

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>

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();

printing only a part of the page (container element and its content)

try this

if you need css/js then add like below or remove

function printDiv(){    
    var divContent=$('#j_print_container').html();  
    var mywindow = window.open('', 'my div', 'height=600,width=750');
    var htm = '<html><head><title>Receipt</title><script src="'+contextPath+'scripts/lib/jquery.min.js" ></script><link rel="stylesheet" href="'+contextPath+'styles/style.css" type="text/css" /><link rel="stylesheet"'+
              'href="'+contextPath+'styles/custom.css" type="text/css" /><link rel="stylesheet" href="'+contextPath+'styles/font-awesome.min.css" type="text/css" />'+
              '<link rel="stylesheet" href="'+contextPath+'styles/bootstrap.min.css" type="text/css" />'+'</head><body >'+divContent;
    htm=htm+'</body></html>';
    mywindow.document.write(htm);
    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10
    mywindow.print();
    mywindow.close();       
}

Get the html of the javascript-rendered page (after interacting with it)

That should do and will grab the ALL page not just the body

console.log(document.getElementsByTagName('html')[0].innerHTML);

window.print() tries to print a page( which is created dynamically) before it finishes rendering

Try something like:

let printAndClose = '<script>onload = function() { window.print(); window.close(); }</sc' + 'ript>';

newWin.document.write(
  styles +
  document.querySelector("table").outerHTML) +
  printAndClose
);

How to render part of a page with PhantomJS?

To only render part of a page you need to set the clipRect attribute for the page and then render it.

var clipRect = document.querySelector(selector).getBoundingClientRect();
page.clipRect = {
    top:    clipRect.top,
    left:   clipRect.left,
    width:  clipRect.width,
    height: clipRect.height
};
page.render('capture.png');

I don't understand the second part of your question. Phantom.js is headless meaning that there is no actual display that a user is looking at.