jsPDF + Autotable - 在每行下方添加线条

Question

在jspd-autotable中，是否可以在每一行下面添加一条线？即不是在每个单元格周围加边框，而是在每个单元格底部加边框。

- Matthew P

Answer 1

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

例子:

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

这个问题可能与你的页面中使用的字体有关。如果字体在PDF生成期间不可用，那么将使用默认字体替换它们。因此，您需要确保在生成PDF时使用的所有字体都已正确加载。

- talha_ah

Answer 2

最终我通过隐藏所有的边框，在每一行之间添加了一个假的行来完成这个任务。我将所有奇数行（除了标题）的高度设置为一个较小的值，并将其背景颜色设为黑色。虽然有点取巧，但效果很好。

- Matthew P

---

请至少提供一个如何实现此功能的示例。 - Paolo Uriel N. Enriquez

请提供至少一个示例或代码。我们也遇到了同样的问题。 - Subhabrata Banerjee

我所提供的答案提供了解决此问题的具体步骤。你要求的是让我为你完成这项工作。我建议你阅读jsPDF文档，了解如何完成上述解决方案中的每一项。 - Matthew P