How to print a specific HTML element and not the full page in Chrome or Firefox?

Question

Let's say I'd like to print (or convert to PDF) a particular area (e.g., a div) of a complex HTML page. How to do that in Chrome or Firefox? I didn't find a specific option from the "inspect element" function.

Answer 1

I know it's a quite an old topic, but here is what worked for me:

<div id="parent_div">
    <p>NOT to be printed</p>
    <div id="print_div">
        Print this!
    </div>
    <button id="print_now" onclick="PrintDiv('print_div')">
</div>

And the JS function:

function PrintDiv(div_id) {
    $('body').css("visibility", "hidden");
    $("#"+div_id).css("visibility", "visible");
    window.print();
    $('body').css("visibility", "visible");    
}

If you are not using jQuery, you can still change the CSS with:

document.getElementById("body").style.visibility = "hidden";
document.getElementById(div_id).style.visibility = "visible";