导出到.xls/.pdf时包括表格列背景色

Question

我使用jQuery DataTables来显示一个表，该表具有基于特定月份员工可用性的多种单元格颜色。我在其中包含了DataTables的"按钮"扩展，这样表就可以导出为.pdf、.xls格式。但是，我无法导出该表及其所有单元格颜色。单元格中的文本数据被完美地导出，但是颜色没有反映出来。

有人能提出解决方案吗？我已经检查了他们的文档，但我找不到任何允许实现这一点的API。

以下是我为实现目标而编写的代码，以及输出的屏幕截图

//function to load the forecast data into the table in a proper format
window.loadData = function (data) {
    //console.log(data);
    //create the table body rows
    $.each(data, function (i, val) {
        //Append database data here as rows
        var trow = $('<tr></tr>');
        //set the name first
        var tdName = $('<td style="font-size:9pt;white-space: nowrap;">' + val.name + '</td>');
        //append it to the row
        trow.append(tdName);
        //append the forecast columns now
        var tdJan = getTabCol(val, 'jan');
        trow.append(tdJan);
        var tdFeb = getTabCol(val, 'feb');
        trow.append(tdFeb);
        var tdMar = getTabCol(val, 'mar');
        trow.append(tdMar);
        var tdApr = getTabCol(val, 'apr');
        trow.append(tdApr);
        var tdMay = getTabCol(val, 'may');
        trow.append(tdMay);
        var tdJun = getTabCol(val, 'jun');
        trow.append(tdJun);
        var tdJul = getTabCol(val, 'jul');
        trow.append(tdJul);
        var tdAug = getTabCol(val, 'aug');
        trow.append(tdAug);
        var tdSep = getTabCol(val, 'sep');
        trow.append(tdSep);
        var tdOct = getTabCol(val, 'oct');
        trow.append(tdOct);
        var tdNov = getTabCol(val, 'nov');
        trow.append(tdNov);
        var tdDec = getTabCol(val, 'dec');
        trow.append(tdDec);

        //append the row to the table
        $('#tabForecastBody').append(trow);

    });
    //make the table a datatable
    var table = $('#tabForecast').DataTable({
        "paging": true,
        "bLengthChange": true,
        "bFilter": false,
        "lengthMenu": [[6, 15, 25, 30], [6, 15, 25, 30]],
        "language": {
            "emptyTable": "No data to show"
        },
        dom: 'Bfrtip',
        buttons: [
            //'copy', 'csv', 'excel', 'pdf', 'print'
            {
                extend: 'excelHtml5',
                title: 'Resource Allocation'
            },
            {
                extend: 'pdfHtml5',
                title: 'Resource Allocation',
                //text: '<span class="glyphicon glyphicon-search"></span>'
            },
            //{
            //    extend: 'csvHtml5',
            //    title: 'Resource Allocation'
            //},
            //{
            //    extend: 'copyHtml5',
            //    title: 'Resource Allocation'
            //},
            {
                extend: 'print',
                title: 'Resource Allocation',
                //exportOptions: {
                //    columns: [0, 1, 2, 5]
                //}
            }
        ],
        order: [],
        columnDefs: [{ "targets": 0, "orderable": false },
        { "targets": 1, "orderable": false },
        { "targets": 2, "orderable": false },
        { "targets": 3, "orderable": false },
        { "targets": 4, "orderable": false },
        { "targets": 5, "orderable": false },
        { "targets": 6, "orderable": false },
        { "targets": 7, "orderable": false },
        { "targets": 8, "orderable": false },
        { "targets": 9, "orderable": false },
        { "targets": 10, "orderable": false },
        { "targets": 11, "orderable": false },
        { "targets": 12, "orderable": false }]
    });
}
//function to return the value of table column
window.getTabCol = function (val, key) {
    var td = null;
    for (var prop in val) {
        if (prop === key) {
            //now split the prop text based on '^'
            var allData = val[prop].split('^');
            //now create the td
            td = $('<td style = "background-color:' + allData[1] + ';cursor:pointer;color:black;font-size:10pt;text-align:center;" title = "' + allData[0] + '" >' + allData[2] + '</td>');
        }
    }
    //now return the newly created column
    return td;
}

Answer 1

在getTabCol()中，也将提取的颜色作为属性添加到每个<td>元素中，您可以将其称为export-color:

...
td = $('<td export-color="'+allData[1]+'" style = "background-color:' + allData[1] + ';cursor:pointer;color:black;font-size:10pt;text-align:center;" title = "' + allData[0] + '" >' + allData[2] + '</td>');
...

现在使用customize函数提取每个单元格的export-color，并使用该值更新单元格的pdf fillColor：

button: [
    { 
        extend : 'pdfHtml5',
        customize: function(doc) {
            for (var r=1;r<doc.content[1].table.body.length;r++) {
                var row = doc.content[1].table.body[r];
                for (c=0;c<row.length;c++) {
                    var exportColor = table
                                        .cell( {row: r-1, column: c} )
                                        .nodes()
                                        .to$()
                                        .attr('export-color');
                    if (exportColor) {
                        row[c].fillColor = exportColor;
                    }
                }
            }
        }
    },
    ...
]

您也可以使用更改每个单元格的文本颜色

row[c].color = 'red'; 

默认样式是条纹效果，其中每个单元格的样式（一个CSS类）为.tableBodyOdd，依此类推

row[c].style = 'cssClass';