jquery - 打印预览时的多种背景颜色

Question

我正在尝试打印一个带有动态生成表的 Bootstrap 模式。该表包含一个代表“评分”的“td”，“td”的背景颜色因评分而异，如下所示。

3 - 绿色，2 - 黄色，1 - 红色。

背景颜色在 Bootstrap 模式中正确显示。当用户单击模态框上的“打印”按钮时，打印预览中会显示没有颜色的模态框。

即使在尝试浏览器打印设置后，这种情况仍然发生。

在打印预览模式下显示颜色的更好方法是什么？

下面是我的 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);              
      }

函数根据'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 打印上添加该属性，并且始终选择您为仅打印设置添加的样式。

例如:

可以查看this Fiddle或 easier print verification 的结果

但它会像这样:

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