不要使用CSS和Javascript獲得div的打印樣式

Question

我想使用Javascript和CSS在div中打印內容。 我的主要div的ID為“ preview”。 使用PHP和MySQL從數據庫中獲取的div中的內容。 在我的打印頁面中，沒有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>

Answer 1

來源：背景顏色未顯示在打印預覽中

這是來自頂部網址的@ purgatory101的復制/粘貼回復

”

Chrome css屬性“ -webkit-print-color-adjust：精確；” 工作正常。

但是，確保您具有正確的CSS打印選項通常很棘手。 可以做幾件事來避免您遇到的困難。 首先，將所有打印CSS與屏幕CSS分開。 這是通過@media打印和@media屏幕完成的。

通常，僅設置一些額外的@media打印CSS是不夠的，因為在打印時您仍然會包含所有其他CSS。 在這些情況下，您只需要了解CSS的特殊性，因為打印規則不會自動與非打印CSS規則相抗。

在您的情況下，-webkit-print-color-adjust：確切正在工作。 但是，您的背景色和顏色定義被具有更高特異性的其他CSS擊敗了。

盡管我幾乎在任何情況下都不贊成使用！important，但是以下定義可以正常工作並暴露問題：

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

”

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 個解決方案

解決方案1
0 2014-12-19 06:58:36

解決方案2
0 2014-12-19 06:58:39

解決方案3
0 2014-12-19 06:59:13

不要使用CSS和Javascript獲得div的打印樣式

問題描述

3 個解決方案

解決方案1 0 2014-12-19 06:58:36

解決方案2 0 2014-12-19 06:58:39

解決方案3 0 2014-12-19 06:59:13

解決方案1
0 2014-12-19 06:58:36

解決方案2
0 2014-12-19 06:58:39

解決方案3
0 2014-12-19 06:59:13