jsPDF与autoTable。如何在行或单元格上加边框？

Question

有没有办法用jsPDF autoTable在单元格或行上加一个上边框？ 我已经厌倦了样式设计。 最近，我试着在需要边框的行前添加行，并将该行变成黑色，但我似乎无法稳定地控制高度。

var doc = new jsPDF('l', 'mm', 'a4');
    var img = new Image()
    img.src = server +'assets/images/dashboard/img.jpeg';
    doc.addImage(img, 'jpeg', 15, 5, 116, 22);
    doc.fromHTML(document.getElementById('acctInfoRow'),15,30);
    doc.setFontSize(9);
    doc.text($('#main_div #overview_header .timeStamp').text(),15,58);
    $('#print_this #printTable_0 .total_row, #print_this #printTable_0 .sub_total_row').before('<tr class="total_border"><td colspan="15"></td></tr>');
    doc.autoTable({
        html: '#printTable_0',
        startY: 60,
        rowPageBreak: 'avoid',
        didParseCell: function(data) {
            if ($(data.row.raw).hasClass('datatable-group') && data.cell) {
                data.cell.styles.fillColor = 225;
            }
            if (($(data.row.raw).hasClass('topHeader2') && data.cell) || ($(data.row.raw).hasClass('topHeader') && data.cell)) {
                data.cell.styles.fillColor = 99;
            }
            if (($(data.row.raw).hasClass('sub_total_row') || $(data.row.raw).hasClass('total_row')) && data.cell) {
                data.cell.styles.minCellHeight = 20;
                data.cell.styles.valign = 'top';
                data.cell.styles.fillColor = 255;
            }
            if ($(data.row.raw).hasClass('total_border')  && data.cell) {
                data.cell.styles.fillColor = 1;
            }
        },
        willDrawCell: function(data) {
            if ($(data.row.raw).hasClass('datatable-group') && data.cell) {
                doc.setTextColor(25);
                doc.setFontStyle('bold');
            }
            if (($(data.row.raw).hasClass('sub_total_row') || $(data.row.raw).hasClass('total_row')) && data.cell) {
                doc.setTextColor(25);
                doc.setFontStyle('bold');
            }
        },
        didDrawCell: function(data) {
            if ($(data.row.raw).hasClass('total_border')  && data.cell) {
        data.row.height = .15
            }
        }
    });
var blob = doc.output("blob");
window.open(URL.createObjectURL(blob));

Answer 1

我找到了一个解决方案，修改了jspdf.plugin.autotable.js中2023-2025行的代码。

from:

if (fillStyle) {
    state_1.default().doc.rect(cell.x, table.cursor.y, cell.width, cell.height, fillStyle);
}

to:

if (fillStyle) {
    if (typeof cell.styles.borders === 'undefined')
        state_1.default().doc.rect(cell.x, table.cursor.y, cell.width, cell.height, fillStyle);//original, all borders
    else {
        var borders = cell.styles.borders.toLowerCase();
        if (borders.indexOf("t") > -1) state_1.default().doc.line(cell.x, table.cursor.y, cell.x + cell.width, table.cursor.y, fillStyle);//border top
        if (borders.indexOf("r") > -1) state_1.default().doc.line(cell.x + cell.width, table.cursor.y, cell.x + cell.width, table.cursor.y + cell.height, fillStyle);//border right
        if (borders.indexOf("b") > -1) state_1.default().doc.line(cell.x, table.cursor.y + cell.height, cell.x + cell.width, table.cursor.y + cell.height, fillStyle);//border bottom
        if (borders.indexOf("l") > -1) state_1.default().doc.line(cell.x, table.cursor.y, cell.x, table.cursor.y + cell.height, fillStyle);//border left
    }
}

并设置新的 边界 的财产 data.cell.style 在 didParseCell hook.如果我想要第二行单元格的顶部边框(row.index=1)。

didParseCell: function (data) {
    var s = data.cell.styles;
    s.lineColor = [255, 255, 255];
    s.lineWidth = 0.1;
    s.font = "helvetica";
    s.fillColor = [255, 255, 255];

    if (data.row.index == 1) {
        s.lineColor = [0, 0, 0];
        s.borders = "t";
    }
}