jsPDF + Autotable - 在每行下添加行

Question

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

Answer 1

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

Answer 2

我们可以使用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

jsPDF + Autotable - 在每行下添加行

jsPDF + Autotable - add line under each row

jspdf

jspdf-autotable