印刷プレビュー時の複数の背景色

Question

動的に生成されたテーブルを含むブートストラップモーダルを印刷しようとしています。テーブルには「評価」の「td」が含まれ、「td」の背景色は以下のように評価に基づいて変化します。

3 - 緑色、2 - 黄色、1 - 赤色。

ブートストラップモードで背景色が正しく表示されています。ユーザーがモーダルで「印刷」ボタンをクリックすると、色のないモーダルが印刷プレビューに表示されます。

ブラウザの印刷設定を試した後でも、これはまだ発生しています。

印刷プレビューモードで色を表示するにはどうすればよいですか？以下は

私のCSSコードです：

@media print{ 

    #modal-Printbtn,#modal-Closebtn{ 
     display:none; 
    } 
    #stp-modalViewHeaderContent{ 
     display:none; 
    } 
    #stp-printViewHeaderContent{ 
     display:block !important; 
    } 
    /*Hiding Metric Table For More Space In Header*/ 
    #printMetricTbl{ 
     display:none; 
    } 
    /* on modal open bootstrap adds class "modal-open" to body, so you can handle that case and hide body */ 
    body.modal-open { 
     visibility: hidden; 
    } 

    body.modal-open .modal .modal-header, 
    body.modal-open .modal .modal-body { 
     visibility: visible; /* make visible modal body and header */ 
    } 

    body.modal-open .modal { 
     position: absolute; 
     left: 0; 
     top: 0; 
     margin: 0; 
     padding: 0; 
     overflow: visible!important; 
    }  
} 

これは私がコードを 'TD' の背景を着色しています、

 var ratingSelected = $tds.eq(1).find('option:selected').text(); 
     var rating,bgColor; 

     if(ratingSelected == 'Select'){ 
      rating = ''; 
      bgColor = returnPrntDynaColorCode(rating); 
     } 
     else{ 
      rating = ratingSelected; 
      bgColor = returnPrntDynaColorCode(rating);    
     } 

機能が

、 '評価' のベースカラーを返すか、あります以下のように

 function returnPrntDynaColorCode(metricVal){ 
      if (metricVal == '3'){ 
      return '#74fe36' 
      } 
     else if (metricVal == '2'){ 
      return'#ffff00'; 
      } 
     else if (metricVal == '1'){ 
      return '#ff0000'; 
      } 
     else if (metricVal == 0){ 
      return 'transparent'; 
      } 
     } 

着色背景、

<td style='background-color:"+bgColor+";text-align: center;vertical-align: middle;'>" rating </td>; 

印刷プレビューでのレーティングに基づいて動的なカラーコードを実装するにはどうすればよいですか？

より良く理解するために、私は提供しています画像

Rating Displayed in UI

Rating Displayed in Print Preview

注：フォント印刷プレビューでは、理由は、カスタムCSSで、小さいです。

Answer 1

ブラウザの実装によっては異なる場合がありますが、Chromeの場合は「-webkit-print-color-adjust：exact;」を追加してみてください。印刷モードで色を取得します。

@mediaプリントにそのプロパティを追加することを忘れないでください。常に、印刷専用設定に追加するスタイルを選択する必要があります。例えば

：

あなたはeasier print verification

ためthis Fiddleや結果を確認することができます。しかし、それはこのように行くだろう：

HTML：

<table> 
    <thead> 
    <tr> 
     <th>Head</th>  
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Rating</td> 
    </tr> 
    </tbody> 
</table> 

CSS：

@media screen { 
    td { 
    background-color: red; 
    } 
} 

@media print { 
    td { 
    background-color: blue; 
    -webkit-print-color-adjust: exact; 
    } 
}