如何使用jsPDF Autotable为表格指定行设置自定义背景色？

我正在使用jsPDF autotable，此前功能运行正常且无报错。现在我希望为表格中的特定行设置相同的背景色，而非改变整页表格的颜色。当前代码仅能基于数组修改整页表格的颜色，想知道需要修改哪些内容或采用何种方法实现指定行设置颜色的需求。

当前使用的代码：

var cor1 = [23, 100, 23];
var cor2 = [50, 23, 79];

function arraysEqual(arr1, arr2){
    if (arr1.length !== arr2.length){
        return false;
    }

    for( var i = 0; i < arr1.length;i++){
        if(arr1[i] !== arr2[i]){
            return false;
        }
    }
    return true;
}

arrayfim.forEach(row => {
    var simValue = row[row.length - 1];

    if (simValue === '') {
        if(arraysEqual(cor,cor1)){
            cor=cor2;
        }else{
            cor=cor1;
        }
    }
});

doc.autoTable({
    startY: 70,
    styles: {
        fontSize: 6,
        cellPadding: 2
    },
    headStyles: {
        fontSize: 6
    },
    bodyStyles: {
        fillColor: cor
    },
    alternateRowStyles: {
        fillColor: cor
    },
    columnStyles: {
        2: {
            cellWidth: 40
        },
        3: {
            cellWidth: 40
        },
        4: {
            cellWidth: 50
        }
    },
    head: [
        ['Dia', 'Turno/Picagens', 'Início', 'Fim', 'Total']
    ],
    body: arrayfim,                            
})

doc.addPage();

要实现指定行设置背景色，不能用全局的bodyStyles或alternateRowStyles统一设置，需利用jsPDF-autotable的钩子或预处理行数据，以下是两种可行方法：

方法一：用didParseCell钩子动态设置 #

该钩子会在解析每个单元格时触发，可根据行的条件判断设置整行背景色：

var cor1 = [23, 100, 23];
var cor2 = [50, 23, 79];
var currentCor = cor1;

doc.autoTable({
    startY: 70,
    styles: {
        fontSize: 6,
        cellPadding: 2
    },
    headStyles: {
        fontSize: 6
    },
    columnStyles: {
        2: { cellWidth: 40 },
        3: { cellWidth: 40 },
        4: { cellWidth: 50 }
    },
    head: [['Dia', 'Turno/Picagens', 'Início', 'Fim', 'Total']],
    body: arrayfim,
    // 新增钩子处理行样式
    didParseCell: function(data) {
        var row = data.row;
        var simValue = row.raw[row.raw.length - 1];
        // 遇到空值切换颜色
        if (simValue === '') {
            currentCor = arraysEqual(currentCor, cor1) ? cor2 : cor1;
        }
        // 为当前行所有单元格设置背景色
        row.cells.forEach(cell => {
            cell.styles.fillColor = currentCor;
        });
    }
});

doc.addPage();

// 保留数组比较函数
function arraysEqual(arr1, arr2){
    if (arr1.length !== arr2.length){
        return false;
    }
    for( var i = 0; i < arr1.length; i++){
        if(arr1[i] !== arr2[i]){
            return false;
        }
    }
    return true;
}

方法二：预处理body数组，为指定行添加样式 #

在传入autoTable前，直接给符合条件的行添加样式属性：

var cor1 = [23, 100, 23];
var cor2 = [50, 23, 79];
var currentCor = cor1;

// 预处理body数组，给目标行添加样式
var styledBody = arrayfim.map(row => {
    var simValue = row[row.length - 1];
    if (simValue === '') {
        currentCor = arraysEqual(currentCor, cor1) ? cor2 : cor1;
    }
    return {
        content: row,
        styles: { fillColor: currentCor }
    };
});

doc.autoTable({
    startY: 70,
    styles: {
        fontSize: 6,
        cellPadding: 2
    },
    headStyles: {
        fontSize: 6
    },
    columnStyles: {
        2: { cellWidth: 40 },
        3: { cellWidth: 40 },
        4: { cellWidth: 50 }
    },
    head: [['Dia', 'Turno/Picagens', 'Início', 'Fim', 'Total']],
    body: styledBody // 使用预处理后的数组
});

doc.addPage();

// 保留数组比较函数
function arraysEqual(arr1, arr2){
    if (arr1.length !== arr2.length){
        return false;
    }
    for( var i = 0; i < arr1.length; i++){
        if(arr1[i] !== arr2[i]){
            return false;
        }
    }
    return true;
}

关键说明 #

• 移除原代码中全局设置的bodyStyles.fillColor和alternateRowStyles.fillColor，避免统一设置所有行颜色。
• 两种方法均基于「行最后一个单元格值为空」的条件切换颜色，并将颜色应用到整行，实现分组变色效果。

内容的提问来源于stack exchange，提问作者Dryddios