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