jsPDF Autotable - 自动以编程方式更改特定行的颜色

Question

我正在使用 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();

到目前为止，通过这段代码，我可以根据数组更改整个表格页面的颜色。 我需要更改什么，或者我需要什么方法来代替更改整个页面来更改表的行？

我正在尝试更改表格特定行的颜色，就像我试图在此图像上显示的那样：

Answer 1

有可以使用的挂钩。我使用 didParseCell 钩子和条件来更改特定单元格/行的颜色。这是一个代码示例：

const handleOnExportClick = () => {
    const pdf = new jsPDF("p", "mm");
    autoTable(pdf, {
        html: cartRef.current,
        bodyStyles: {
            fillColor: [52, 73, 94],
            textColor: 240,
        },
        alternateRowStyles: {
            fillColor: [74, 96, 117],
        },
        didParseCell: (data) => {
            if (data.row.index === 1) {
                data.cell.styles.fillColor = [40, 170, 100];
            }
            if (data.row.cells[0].text[0] === "Handbag") {
                data.cell.styles.fillColor = [255, 255, 0];
            }
        },
    });
    pdf.save("autotable.pdf");
};

我更改了第二行的颜色和该行的颜色，其中第一个单元格带有文本“手提包”。您只需根据您的情况调整条件即可。我想注意到 cartRef 是对 html 元素的 React 引用。