In this article I will explain how to print HTML DIV content without opening new popup window using JavaScript.
The traditional method to print HTML DIV content is to open a new popup window and write the contents to it and finally call the Print command. Thus in this article I will explain how to get rid of the popup window and print the DIV content.
 
The below code snippet prints the contents of an HTML DIV without opening new popup window using JavaScript.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function PrintDiv() {
            var contents = document.getElementById("dvContents").innerHTML;
            var frame1 = document.createElement('iframe');
            frame1.name = "frame1";
            frame1.style.position = "absolute";
            frame1.style.top = "-1000000px";
            document.body.appendChild(frame1);
            var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
            frameDoc.document.open();
            frameDoc.document.write('<html><head><title>DIV Contents</title>');
            frameDoc.document.write('</head><body>');
            frameDoc.document.write(contents);
            frameDoc.document.write('</body></html>');
            frameDoc.document.close();
            setTimeout(function () {
                window.frames["frame1"].focus();
                window.frames["frame1"].print();
                document.body.removeChild(frame1);
            }, 500);
            return false;
        }
    </script>
</head>
<body>
    <form id="form1">
    <span style="font-size: 10pt; font-weight: bold; font-family: Arial">ASPSnippets.com
        Sample page</span>
    <hr />
    <div id="dvContents" style="border: 1px dotted black; padding: 5px; width: 300px">
        <span style="font-size: 10pt; font-weight: bold; font-family: Arial">Hello,
            <br />
            This is <span style="color: #18B5F0">Mudassar Khan</span>.<br />
            Hoping that you are enjoying my articles!</span>
    </div>
    <br />
    <input type="button" onclick="PrintDiv();" value="Print" />
    </form>
</body>
</html>
 
 
Explanation
When the Print button is clicked, first the contents of the HTML DIV to be printed are extracted.
Then a dynamic IFRAME is created and the extracted contents of the HTML DIV are written to the IFRAME and finally the IFRAME document is printed using the JavaScript Window Print command and the IFRAME is removed from the page.
 

Screenshots
Printing DIV contents without popup window
Print DIV content without opening new popup window using JavaScript
 
Printed XPS document
Print DIV content without opening new popup window using JavaScript
 
Browser Compatibility

The above code has been tested in the following browsers

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
Demo
 
Downloads