使用单元格（<td>）背景颜色的 jQuery 数据表导出到 excel答案

【问题标题】：jQuery datatable export to excel with cell(<td>) background color使用单元格（<td>）背景颜色的 jQuery 数据表导出到 excel
【发布时间】：2020-10-05 21:27:46
【问题描述】：

PFB 是我的代码示例： https://codepen.io/avinash-reddy95/pen/eYzORmJ.

<script type="text/javascript">
        $(document).ready(function () {
            var table = $('#example').DataTable({
            "paging": false,
            "info": false,
            searching: false,
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'excelHtml5',
                    title: 'custom'
                }
            ]
            });
        });
    </script>

我正在使用 jQuery datatable 呈现表格并使用 dataTable 导出到 Excel 功能。我可以成功导出 excel，但如果单元格有任何背景颜色，我想导出到带有单元格背景颜色的 excel。

在上面的示例列中，“Salary”、“Age”、“date”的某些单元格是红色的，我想用这些颜色导出。有人可以帮我解决这个问题吗？

【问题讨论】：

您可以修改this answer 中的代码来做到这一点。在您的情况下，您选择的是style="background-color: red"，而不是自定义类名。您可以通过使用built-in styles 之一而不是创建自己的来保持简单 - 例如：$('c[r=B3] t', sheet).attr( 's', '10' );，其中10 是“普通文本，红色背景”的样式代码。
感谢@andrewjames 的回答。我已经更新了我的问题并在“codepen”中更新了我的代码，请检查一下。我有多个带有颜色的列，我想导出所有这些颜色。
我更新了“codepen”中的所有更改。而且我没有“薪水”的的背景颜色，里面有一个锚，我有那个锚标签的颜色。能否请您告诉我如何导出该锚标记颜色？
我在回答中添加了一些注释，基于您的方法与我链接到的解决方案之间的主要区别。

【解决方案1】：

您对这样的单元格的使用（简化）...

<td><a href="" style="background-color: red;"><i>$12,345</i></a></td>

...确实让事情变得更复杂了。

要确定 HTML 使用的背景颜色，您可以遍历表格的单元格，然后以这种方式提取颜色。

这是一个这样做的例子。

假设你在一个函数中拥有所有这些逻辑：

customize: function ( xlsx ) {
  var sheet = xlsx.xl.worksheets['sheet1.xml'];
  highlightCells(sheet);
}

函数是：

   function highlightCells(sheet) {
    $( '#example' ).dataTable().api().rows( { search: 'applied' } )
        .every( function ( rowIdx, tableLoop, rowLoop ) {
      var xlRow = rowLoop +2; // +1 for DT zero index; +1 for row heading in Excel
      $.each( $( 'td', $(this.node()) ), function( index, trNode ) {
        var bgColor = $('a', trNode).css("background-color");
        if ( bgColor ) {
          var xlCol = createXlColLetter(index);
          var xlRef = xlCol + xlRow;
          console.log( 'xlRef = ' + xlRef + ": bgColor = " + bgColor );
          var cellSelector = 'c[r=' + xlRef + ']';
          console.log( cellSelector );
          var cellStyleID = 10; // assume all are "rgb(255, 0, 0)" (red)
          $(cellSelector, sheet).attr( 's', cellStyleID );
        }
      } );
    } );
  }

它还使用支持函数将列整数转换为 Excel 字母：

  // to build an Excel column letter reference from an 
  // integer (1 -> A, 2 -> B, 28 -> AB, and so on...); 
  function createXlColLetter( n ){
    var ordA = 'A'.charCodeAt(0);
    var ordZ = 'Z'.charCodeAt(0);
    var len = ordZ - ordA + 1;
    var s = "";
 
    while( n >= 0 ) {
        s = String.fromCharCode(n % len + ordA) + s;
        n = Math.floor(n / len) - 1;
    }
 
    return s;
  }

主函数使用此选择器定位单元格的背景颜色：

var bgColor = $('a', trNode).css("background-color");

在我上面的代码中，我假设它总是红色 (rgb(255, 0, 0))，因此我将格式化 ID 硬编码为 10。

但您可以使用 switch 语句来处理一系列颜色。

但是...

这对您来说可能仍然只是部分解决方案。

如果您的单元格数据不是纯文本（例如 Excel 货币值或数字），则应用其中一种内置样式可能会强制该 Excel 单元格丢失其数字格式。 DataTables 提供的每种内置样式都会覆盖您可能需要的任何其他样式。

例如 - 如果我从这个 HTML 表格开始：

...我最终会得到这张 Excel 表格：

您可以看到货币格式已经丢失 - 因为样式 10 是 普通文本，红色背景。 Normal 表示 Excel“通用”文本格式。

您不能将 2 个或多个 DataTables 样式应用于一个单元格。

因此，这意味着您现在必须提前准备好所需的所有样式，在 Excel 电子表格中，然后解压缩 Excel 文件，从相关 Excel 样式文件中获取相关 HTML，并将其应用到您的 DataTables Excel 文件中.

这就是 OP 在the question I originally linked to 中所做的事情。所以我认为在你的情况下你也需要这样做。

您仍然可以使用我上面的示例代码，但您将使用来自您的样式表的样式 ID，而不是 DataTables 中可用的内置样式 ID。

【讨论】：