Print DIV content without opening new popup window using JavaScript

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">

<head>

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>

<span style="font-size: 10pt; font-weight: bold; font-family: Arial">ASPSnippets.com

Sample page</span>

<hr />

<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 />

</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