数据表打印自定义单元格颜色

Question

我想在打印表格时更改表格单元格的颜色。打印自定义函数被调用并正常工作，但颜色没有改变..

当我渲染初始表格时，我调用 rollCallback 来设置单元格颜色

rowCallback: function(row, data, index){
                    if(data.scores <= 1){
                        $(row).find('td:eq(2)').css('background-color', 'red');
                    }
                    if(data.scores > 1  && data.scores <=2 ){
                        $(row).find('td:eq(2)').css('background-color', 'yellow');
                    }
                    if(data.scores > 2){
                        $(row).find('td:eq(2)').css('background-color', 'green');
                    }
                   
                }

在打印按钮中。我使用相同的代码再次渲染背景颜色

{
                    extend : 'print',
                    text : '<i class="fa fa-print fa-lg"></i>',
                    titleAttr : 'Print',
                    exportOptions : {
                        columns : [0,1,2,4]
                    },
                    customize: function(win,conf,table) {
                        

                        table.rows().every(function(index,element) {
                        
                            if(this.data().scores <= 1)
                            {
                                     $(this).find('td:eq(2)').css('background-color', 'red');
                            }
                             if(this.data().scores > 1  && this.data().scores <=2 )
                            {
                                     $(this).find('td:eq(2)').css('background-color', 'yellow');
                            }
                             if(this.data().scores > 2)
                            {
                                     $(this).find('td:eq(2)').css('background-color', 'green');
                            }
                
                    
                        });

    
                            
                            

                    }
                    
                }

颜色不变.. 我正在使用 jquery-3.5.1 数据表-1.10.21 按钮-1.6.3

使用@andrewjames 回答我得到了更好的结果.. 预览现在有颜色.. 但是当从浏览器使用 ctrl-print 时，我再次失去了样式。

Answer 1

这是我在其他答案中提到的方法，但适用于您的具体情况。

在我的测试数据中，我只有 3 列，所以我对您的代码做了一个小改动 - 我将这个 columns : [0,1,2,4] 更改为这个 columns : [ 0, 1, 2 ]。

这是我的起始表：

以下是我添加的一些额外样式：

  <style>
    td.bg_red {
      background-color: red;
    }
    td.bg_yellow {
      background-color: yellow;
    }
    td.bg_green {
      background-color: green;
    }
  </style>

我使用了以下嵌入式测试数据（而不是 ajax 数据源）：

var dataSet = [
    { "name" : "Tiger Nixon", 
      "office": "London",
      "scores" : 1 },
    { "name" : "Donna Snider", 
      "office": "New York",
      "scores" : 2 },
    { "name" : "Airi Satou", 
      "office": "Tokyo",
      "scores" : 3 }
];

这是 DataTables 的定义：

<script type="text/javascript">

var dataSet = [
    { "name" : "Tiger Nixon", 
      "office": "London",
      "scores" : 1 },
    { "name" : "Donna Snider", 
      "office": "New York",
      "scores" : 2 },
    { "name" : "Airi Satou", 
      "office": "Tokyo",
      "scores" : 3 }
];

  $(document).ready(function() {
  
    $('#example').DataTable({
      dom: 'Bfrtip',

      data: dataSet,
      columns: [
          { title: "Name", data: "name" },
          { title: "Office", data: "office" },
          { title: "Score", data: "scores" }
      ],

      rowCallback: function(row, data, index){
        if(data.scores <= 1){
          $(row).find('td:eq(2)').addClass("bg_red");
        }
        if(data.scores > 1  && data.scores <=2 ){
          $(row).find('td:eq(2)').addClass("bg_yellow");
        }
        if(data.scores > 2){
          $(row).find('td:eq(2)').addClass("bg_green");
        }             
      },
      
      buttons: [
        {
          extend: 'print',
          //autoPrint: false, // useful for testing
          exportOptions: {
            //columns : [0,1,2,4],
            columns : [ 0, 1, 2 ],
            format: {
              body: function ( inner, rowidx, colidx, node ) {
                if (node.classList.contains('bg_red')) {
                  return '<span class="bg_red">' + inner + '</span>';
                } else if (node.classList.contains('bg_yellow')) {
                  return '<span class="bg_yellow">' + inner + '</span>';
                } else if (node.classList.contains('bg_green')) {
                  return '<span class="bg_green">' + inner + '</span>';
                } else {
                  return inner;
                }
              }
            }
          },
          customize: function ( win, butt, tbl ) {
            $(win.document.body).find('span.bg_red').parent().css('background-color', 'red');
            $(win.document.body).find('span.bg_yellow').parent().css('background-color', 'yellow');
            $(win.document.body).find('span.bg_green').parent().css('background-color', 'green');
          }
      } ]
      
    }); 

  });
</script>

这里是打印预览：

这使用与我在 cmets 中提到的其他答案中描述的相同技术，但适用于您的特定场景。它起作用的原因与该答案中描述的相同。

更新

您可能需要调整打印机设置才能看到实际打印输出的颜色。例如，使用谷歌浏览器：