Dont get style of div in print using CSS and Javascript
Question
I want to print content in a div using Javascript and CSS. My main div is with id 'preview'. Content in a div taken from database using PHP and MySQL. In my print page don't get style of the div 'preview'. I want to open print screen in new window. Any body give any suggestion for these issue?
My page and print are
My code is given below.
<?php
error_reporting(0);
$host='localhost'; // Host Name.
$db_user= 'root'; //User Name
$db_password= '';
$db= 'excel'; // Dat
$conn=@mysql_connect($host,$db_user,$db_password) or die (mysql_error());
mysql_select_db($db) or die (mysql_error());
$sql = "select * from first order by id";
$rsd = @mysql_query($sql);
?>
<script type="text/javascript">
function printDiv(divID)
{
var divElements = document.getElementById(divID).innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML =
"<html><head><title></title></head><body>" +
divElements + "</body>";
window.print();
document.body.innerHTML = oldPage;
}
</script>
<style type="text/css" media="print">
@media print{ #preview{ height:100%;overflow:visible;} }
</style>
<style>
#my-list{
padding: 10px;
padding-left:15px;
width:auto;
margin:auto;
}
#my-list > li {
display: inline-block;
zoom:1;
*display:inline;
}
#my-list > li > a{
color: #666666;
text-decoration: none;
padding: 3px 8px;
}
</style>
<input type="button" value="Print" onClick="javascript:printDiv('preview')" />
<div id="preview" style="width:1000px; margin:auto;">
<ul id="my-list" >
<?php
$si=1;
while($fet=mysql_fetch_array($rsd))
{
?>
<li>
<div class="droppable2" style="border-color:#3300FF; border:solid #999999;
height:180px;width:180px;position:relative; " >
<div style="float:left;position:absolute; bottom:30px;" class="left">
<img src="img.png" >
</div>
<div style="float:right;">
<p style="color: #003399; font-size: 10px;
padding-right:5px; font-weight:800; ">www.selafone.net</p>
<table style="font-size:10px;" >
<tr> <td >USERNAME: </td> <td> <?php echo $fet['name']; ?> </td></tr>
<tr> <td>PASSWORD:</td> <td> <?php echo $fet['email']; ?></td></tr></table>
</div>
<div style="position:absolute;background-color:#FF0000;
padding-bottom:0px; bottom: 0; height:36px; ">
<div style="color:#FFFFFF; padding-left:30px; vertical-align:middle;
font-weight:100;padding-top:10px; font-size: 8px;">
<strong> International prepaid Calling Card</strong></div></div>
</div>
</li>
<?php
$si=$si+1;
}
?>
</ul>
</div>
3 answers
solution1
0 2014-12-19 06:58:36
Source: Background color not showing in print preview
this is copy/paste reply of @purgatory101 from the top url
"
The Chrome css property "-webkit-print-color-adjust: exact;" works appropriately.
However, making sure you have the correct css for printing can often be tricky. Several things can be done to avoid the difficulties you are having. First, separate all your print css from your screen css. This is done via the @media print and @media screen.
Often times just setting up some extra @media print css is not enough because you still have all your other css included when printing as well. In these cases you just need to be aware of css specificity as the print rules don't automatically win against non-print css rules.
In your case, the -webkit-print-color-adjust: exact is working. However, your background-color and color definitions are being beaten out by other css with higher specificity.
While I DO NOT endorse using !important in nearly any circumstance, the following definitions work properly and expose the problem:
@media print {
.your_id {
color: white !important;
background-color: #1a4567 !important;
-webkit-print-color-adjust: exact;
}
}
"
solution2
0 2014-12-19 06:58:39
If you want to open new window with printing page you need to create this window. Something like this:
function printDiv(divID)
{
var divElements = document.getElementById(divID).innerHTML; // your div
var newWindow=window.open('','','width=600,height=600'); // new window
newWindow.document.write(divElements); // div → window
newWindow.document.close();
newWindow.focus();
newWindow.print(); // printing
newWindow.close();
}
solution3
0 2014-12-19 06:59:13
You can put all your CSS rules like this:
@media screen {
// css rules for screen
}
@media print {
// css rules for print
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.