Question

我试图用动态生成的表格打印一个bootstrap模式。该表包含一个＆t;＆lt; td＆＃39;对于＆＃39;评级＆＃39;，背景颜色＆＃39; td＆＃39;因评级而异，如下所示。

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

正确地在bootstrap模式上显示背景颜色。当用户点击＆＃39;打印＆＃39;模态上的按钮，没有颜色的模态显示在打印预览中。

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

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

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

这就是我如何着色背景的＆＃39;＆＃39;通过代码，

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

函数根据＆＃39; rating＆＃39;，

返回颜色

      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，您可以尝试添加＆＃34; -webkit-print-color-adjust：exact;＆＃34;在打印模式下获取颜色。

您不应忘记在@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; 
  }
}

打印预览中的多种背景颜色

1 个答案: