Fatal编程技术网
  • javascript/
  • 不要使用CSS和Javascript打印div的样式

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

javascript php css

不要使用CSS和Javascript打印div的样式,javascript,php,css,Javascript,Php,Css,我想使用Javascript和CSS在div中打印内容。我的主要div是id为“preview”的。div中的内容使用PHP和MySQL从数据库中获取。在我的打印页面中，不获取div“preview”的样式。我想在新窗口中打开打印屏幕。有没有人对这些问题提出建议 我的页面和打印是 我的代码如下 <?php error_reporting(0); $host='localhost'; // Host Name. $db_user= 'root'; //User Name

我想使用Javascript和CSS在div中打印内容。我的主要div是id为“preview”的。div中的内容使用PHP和MySQL从数据库中获取。在我的打印页面中，不获取div“preview”的样式。我想在新窗口中打开打印屏幕。有没有人对这些问题提出建议

我的页面和打印是

我的代码如下

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


函数printDiv（divID）
{
var divElements=document.getElementById（divID）.innerHTML；
var oldPage=document.body.innerHTML；
document.body.innerHTML=
"" + 
divElements+“”；
window.print（）；
document.body.innerHTML=旧页；
}
@媒体打印{#预览{高度：100%；溢出：可见；}
#我的名单{
填充：10px；
左侧填充：15px；
宽度：自动；
保证金：自动；
}
#我的名单>李{
显示：内联块；
缩放：1；
*显示：内联；
}
#我的列表>李>a{
颜色：#666666；
文字装饰：无；
填充：3px8px；
}

    

  • 

    www.selafone.net
    
用户名：
密码：
国际预付电话卡

    •
来源：

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

"

Chrome css属性“-webkit打印颜色调整：精确；“这是恰当的

但是，确保打印时使用正确的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; 
  }
}
“

如果要打开带有打印页面的新窗口，则需要创建此窗口。大概是这样的：

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

@media screen {
    // css rules for screen
} 

@media print {
    // css rules for print
}
您可以将所有CSS规则如下所示：

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

@media screen {
    // css rules for screen
} 

@media print {
    // css rules for print
}
通常，浏览器在打印时会隐藏背景色。原因是，如果你的整个网站都有背景色，打印会在整个页面上打印背景色，使用大量墨水，看起来不太好。我一时记不起如何让它打印背景色，所以请咨询谷歌。@Travesty3我听不懂这个帖子，这会有助于解释：@Travesty3我得到了背景色：），你知道如何在新页面中打开这些窗口吗？我的主div“preview”包含innner div和paragraphp。我将所有样式添加到@media print{}，但不获取样式