Print partial div contents using JavaScript

Mohammed Imtiyaz Mar 13, 2015

This tutorial will explain you how to print partial div contents on web page using JavaScript.

<!DOCTYPE html>
<html>

<head>
    <title>Print partial div contents using JavaScript</title>
</head>

<body>
    <div id="div1">Div 1 Contents...</div>
    <input id="Button1" type="button" value="Print" onclick="Print('div1')" />

    <div id="div2">Div 2 Contents...</div>
    <input id="Button2" type="button" value="Print" onclick="Print('div2')" />

    <div id="div3">Div 3 Contents...</div>
    <input id="Button3" type="button" value="Print" onclick="Print('div3')" />
</body>

</html>

Javascript

<script language="javascript" type="text/javascript">

    function Print(el) {
        var objRestorePage = document.body.innerHTML;
        var objPrintContent = document.getElementById(el).innerHTML;
        document.body.innerHTML = objPrintContent;
        window.print();
        document.body.innerHTML = objRestorePage;
    }
</script>