Question

我想使用Javascript和CSS在div中打印内容。我的主要部分是id'预览'。使用PHP和MySQL从数据库中取出的div中的内容。在我的打印页面中，没有获得div'预览'的样式。我想在新窗口中打开打印屏幕。有没有人对这些问题提出任何建议？

我的页面和打印件是

enter image description here

我的代码如下。

     <?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>

Answer 1

来源：Background color not showing in print preview

这是@ purgatory101从顶部网址
的复制/粘贴回复

＆＃34;

Chrome css属性＆＃34; -webkit-print-color-adjust：exact;＆＃34;工作得很好。

但是，确保使用正确的css进行打印通常很棘手。可以采取一些措施来避免您遇到的困难。首先，将所有打印css与屏幕css分开。这是通过@media print和@media屏幕完成的。

通常只是设置一些额外的@media print 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; 
  }
}

＆＃34;

Answer 2

如果要打开包含打印页面的新窗口，则需要创建此窗口。像这样：

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();
}

Answer 3

你可以把所有CSS规则都这样：

@media screen {
    // css rules for screen
} 

@media print {
    // css rules for print
}

不要使用CSS和Javascript获得打印div的样式

3 个答案: