我想使用 Javascript 和 CSS 在 div 中打印内容。我的主要 div 的 ID 为“预览”。使用 PHP 和 MySQL 从数据库中获取的 div 中的内容。在我的打印页面中，没有获得 div“预览”的样式。我想在新窗口中打开打印屏幕。有没有人对这些问题提出任何建议？
我的页面和打印是
我的代码如下。
<?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>
最佳答案
来源:Background color not showing in print preview
this is copy/paste reply of @purgatory101 from the top url
”
Chrome CSS 属性“-webkit-print-color-adjust: exact;”正常工作。
但是，确保您拥有用于打印的正确 css 通常很棘手。可以做几件事来避免您遇到的困难。首先，将所有打印 CSS 与屏幕 CSS 分开。这是通过@media print 和@media screen 完成的。
通常仅仅设置一些额外的@media 打印 css 是不够的，因为在打印时你仍然包含所有其他 css。在这些情况下，您只需要了解 css 特异性，因为打印规则不会自动胜过非打印 css 规则。
在您的情况下，-webkit-print-color-adjust: exact 正在运行。但是，您的背景颜色和颜色定义正在被其他具有更高特异性的 css 打败。
虽然我不赞成在几乎任何情况下使用 !important，但以下定义可以正常工作并暴露问题:
@media print {
.your_id {
color: white !important;
background-color: #1a4567 !important;
-webkit-print-color-adjust: exact;
}
}
”
关于javascript - 不要使用 CSS 和 Javascript 在打印中获取 div 样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27560880/