In this article I will explain how to print DIV contents with CSS styles using JavaScript and jQuery without using any jQuery Print plugin.
When one tries to print a DIV with CSS styles applied from an external CSS file, the contents are printed without the CSS styles. Thus using the following trick one can print the DIV contents with the CSS styles.
HTML Markup
The HTML Markup consists of an HTML DIV which is styled using an external CSS file and a Button for printing the HTML DIV contents.
<link href="style.css" rel="stylesheet" type="text/css" />
<div id="dvContents">
<div class="left">
<img alt="" src="images/ASPSnippets.png" />
</div>
<div class="right">
<span class="label">ASPSnippets.com Sample page</span>
</div>
<div class="clear">
</div>
<hr />
<div class="contents">
<span class="label">Hello,
<br />
This is <span class="name">Mudassar Khan</span>.<br />
Hoping that you are enjoying my articles!</span>
</div>
</div>
<br />
<input type="button" id="btnPrint" value="Print" />
External CSS file
The following external CSS file contains the styling for the HTML DIV.
.label
{
font-size: 10pt;
font-weight: bold;
font-family: Arial;
}
.contents
{
border: 1px dotted black;
padding: 5px;
width: 300px;
}
.name
{
color: #18B5F0;
}
.left
{
float: left;
width: 50px;
height: 50px;
}
.right
{
margin-left: 60px;
line-height:50px;
}
.clear
{
clear: both;
}
Printing DIV contents with CSS using JavaScript and jQuery
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 along with the link to the external CSS file and finally the IFRAME document is printed using the JavaScript Window Print command and the IFRAME is removed from the page.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnPrint").click(function () {
var contents = $("#dvContents").html();
var frame1 = $('<iframe />');
frame1[0].name = "frame1";
frame1.css({ "position": "absolute", "top": "-1000000px" });
$("body").append(frame1);
var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
frameDoc.document.open();
//Create a new HTML document.
frameDoc.document.write('<html><head><title>DIV Contents</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
//Append the DIV contents.
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 500);
});
});
</script>
Screenshots
HTML DIV Contents
![Print DIV contents with CSS using JavaScript and jQuery]()
Printed HTML DIV with CSS
![Print DIV contents with CSS using JavaScript and jQuery]()
Demo
Downloads
