导出为 .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';