javascript - 如何使用 jsPDF Autotable 插件设置最后一行的样式？

Question

我使用 jsPDF 和 AutoTable 创建一个基于表格的 PDF 文档:

var doc = new jsPDF('p', 'pt');
   //columns and rows are arrays created from the table content
        doc.autoTable(columns, rows, {

        drawRow: function (row) {
            if (row.index == rows.length - 1) {
                console.log('last row');
                //TODO
            }
        },
        pageBreak: 'avoid',
        headerStyles: {
            fillColor: [239, 154, 154],
            textColor: [0, 0, 0],
            halign: 'center'
        },
        bodyStyles: {
            halign: 'center'
        },
        margin: {top: 60},
        theme: 'striped'
    });

    doc.save('table.pdf');

我想做的是为表格的最后一行设置不同的背景颜色。如上面的代码所示，我可以检测到最后一行何时被绘制，但是我无法修改它。我尝试使用 RGB 值设置 row.fillColor，但似乎没有效果。

我还查看了 examples ，但找不到任何可以帮助我解决这个问题的东西。有什么想法吗？

Answer 1

要动态更改样式，您有两种选择。第一种是使用 didParseCell 来改变 autoTable 的样式:

doc.autoTable({
    html: '#table',
    didParseCell: function (data) {
        var rows = data.table.body;
        if (data.row.index === rows.length - 1) {
            data.cell.styles.fillColor = [239, 154, 154];
        }
    }
});

第二种是使用 willDrawCell 如果你更愿意使用 jspdf 样式函数:

doc.autoTable({
    html: '#table',
    willDrawCell: function (data) {
        var rows = data.table.body;
        if (data.row.index === rows.length - 1) {
            doc.setFillColor(239, 154, 154);
        }
    },
});

查看更多高级示例 here .