jsPDF + Autotable - 在每行下添加行

Question

是否可以在 jspd-autotable 的每一行下添加一行？即不是每个单元格的边框，只是每个单元格的底部边框。

Answer 1

我们可以使用jspdf autotable和jspdf line方法的钩子“willDrawCell”来指定任何边边框。

例子：

doc.autoTable({
  willDrawCell: function(data) {
    // add borders around the head cells
    if (data.row.section === "head") {
      doc.setDrawColor(0, 0, 0); // set the border color
      doc.setLineWidth(0.5); // set the border with

      // draw bottom border
      doc.line(
        data.cell.x,
        data.cell.y + data.cell.height,
        data.cell.x + data.cell.width,
        data.cell.y + data.cell.height
      );
      // draw top border
      doc.line(
        data.cell.x + data.cell.width,
        data.cell.y,
        data.cell.x,
        data.cell.y
      );
      // draw left border
      doc.line(
        data.cell.x,
        data.cell.y + data.cell.height,
        data.cell.x,
        data.cell.y
      );
      // draw right border
      doc.line(
        data.cell.x + data.cell.width,
        data.cell.y,
        data.cell.x + data.cell.width,
        data.cell.y + data.cell.height
      );
    }
  },
});

还可以为某些特定的单元格添加边框：

doc.autoTable({
  willDrawCell: function(data) {
    // add borders around the head cells
    if (data.row.section === "head" && data.column.dataKey === "qty") {
      doc.setDrawColor(255, 255, 0); // set the border color
      doc.setLineWidth(0.5); // set the border with

      // draw bottom border
      doc.line(
        data.cell.x,
        data.cell.y,
        data.cell.x + data.cell.width,
        data.cell.y
      );
    }
  },
});

参考：https://github.com/simonbengtsson/jsPDF-AutoTable/issues/651#issuecomment-626272061

Answer 2

最后我设法通过隐藏所有边框并在每行之间添加一个假行来做到这一点。然后我将每个奇数行（不包括标题）的高度设置为一个较小的值，并将背景颜色设置为黑色。有点破解，但它可以工作并且看起来不错。