Menu
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.
711
These are the possible reasons: You have a wrong or incorrect link to the bootstrap file. browser caching and history is messing with your html. Other CSS files are overriding the bootstrap file.
CSS grid and bootstrap grid can work together perfectly. Rather than pit them against each other, it's up to you to find a way to blend these two powerful grids.
With Bootstrap, you can choose from several predefined button styles to quickly add buttons to landing pages or forms on your Bootstrap site. Let's say you want to add an “info” button to your site. Below is the example and how it would look on the front end.
Yes it is a "probleme" with bootstrap media queries. If you inspect the bootstrap css you will see that col-sm-xx is getting size after 768px, col-md-xx after 992px, viewport of A4 print is 670px? (Safe Width in Pixel for Printing Web Pages?). So you have to user col-xs-xx for print or add a media query to use col-sm-xx
@media print {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666666666666%;
}
.col-sm-10 {
width: 83.33333333333334%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666666666666%;
}
.col-sm-7 {
width: 58.333333333333336%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666666666667%;
}
.col-sm-4 {
width: 33.33333333333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.666666666666664%;
}
.col-sm-1 {
width: 8.333333333333332%;
}
}
Might need to add more inside @media print
118
Just try the below code, I am using Bootstrap 4
Javascript code:
print(): void {
let printContents, popupWin;
printContents = document.getElementById('print-section').innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<style>
</style>
<body onload="window.print();window.close()">${printContents}</body>
</html>`
);
popupWin.document.close();
}
HTML Code:
<div class="card-body">
<div id="print-section">
<div class="row">
<div class="col-sm-6 col-xs-6">
<div class="card">
<div class="card-body">
<h5 class="card-title"><b style="color:red">Company Name</b></h5>
<p class="card-text">With .</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="card">
<div class="card-body">
<h5 class="card-title text-center">INVOICE</h5>
<p class="card-text">Ws a natural lead-in to additional
content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<button class="btn btn-info btn-sm float-right" onclick="print()">Print</button>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With