不使用CSS和Javascript打印div样式

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

我的页面和打印是

enter image description here

我的代码如下。

 <?php 
error_reporting(0); 
$host='localhost'; // Host Name. 
$db_user= 'root'; //User Name 
$db_password= ''; 
$db= 'excel'; // Dat 
[email protected]_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>

来源

2014-12-19 sh kk

通常，浏览器在打印时会隐藏背景颜色。原因是，如果您的整个网站上有背景色，打印将在整个页面上打印背景色，使用大量墨水，看起来不太好。我不记得如何让它打印背景颜色，所以请向Google咨询。 – Travesty3 2014-12-19 06:41:50

@ Travesty3我无法理解 – 2014-12-19 06:58:44

阅读此主题，它将帮助解释：http://stackoverflow.com/q/7090451/259457 – Travesty3 2014-12-19 07:15:19

来源：Background color not showing in print preview

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

“

Chrome css属性“-webkit-print-color-adjust：exact;”适当地工作。

但是，确保你有正确的打印css往往是棘手的。可以做几件事来避免你遇到的困难。首先，从你的屏幕CSS中分离所有的打印CSS。这是通过@media print和@media屏幕完成的。

通常只需设置一些额外的@media print css是不够的，因为在打印时仍然包含所有其他css。在这些情况下，您只需要注意css的特性，因为打印规则不会自动赢得非打印的css规则。

在你的情况下，-webkit-print-color-adjust：exact正在工作。但是，您的背景颜色和颜色定义正被其他具有更高特异性的CSS所打败。

虽然我不认可在几乎任何环境下使用很重要，下面的定义正常工作和揭露问题：

@media print { 
    .your_id { 
    color: white !important; 
    background-color: #1a4567 !important; 
    -webkit-print-color-adjust: exact; 
    } 
}

“

来源

2014-12-19 06:58:36 crazymoin

如果你要开个打印页的新窗口，您。需要创建这个窗口，事情是这样的：

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

来源

2014-12-19 06:58:39

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

@media screen { 
    // css rules for screen 
} 

@media print { 
    // css rules for print 
}

来源

2014-12-19 06:59:13 kapantzak

我的主要div'预览'包含innner div和paragraphp.I将所有样式添加到@media print { }，但是没有获得样式 – 2014-12-19 07:28:01

不使用CSS和Javascript打印div样式

回答

相关问题