129
rated 0 times
[
135]
[
6]
/ answers: 1 / hits: 19382
/ 10 Years ago, tue, october 14, 2014, 12:00:00
I'm trying to print a div content using Javascript. I am using external css files for styling. But print document do not apply styles after adding bootstrap.css.
Here is my code.
HTML page
<html>
<head>
<title>Print Div Test</title>
<link href=css/mycss.css rel=stylesheet />
<link href=css/bootstrap.css rel=stylesheet />
<script src=js/lib/jquery-1.11.1.js></script>
<script type=text/javascript>
function PrintElem() {
Popup($('#mydiv').html());
}
function Popup(data) {
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
mywindow.document.write(<link rel=stylesheet href=css/bootstrap.css type=text/css media=print />);
mywindow.document.write(<link rel=stylesheet href=css/mycss.css type=text/css />);
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
//mywindow.close();
return true;
}
</script>
</head>
<body>
<div>
<div id=mydiv class=row>
<h1>This will be printed. </h1>
<div class=col-md-6>
<div style=color: red>In line styles applied.</div>
</div>
<div class=col-md-6>
<div class=myclass>Style from sheet</div>
</div>
</div>
<input type=button value=Print Div onclick=PrintElem() />
</div>
</body>
</html>
CSS File
.myclass {
color: greenyellow;
}
Is it a problem with media queries? Before adding bootstrap it works with other style.
More From » jquery
