下一页中的jsPDF Autotable Colspan会产生问题

时间:2018-11-02 03:52:09

标签: javascript jspdf jspdf-autotable

我正在尝试创建一个带有表格的PDF。 我的要求是将colspan应用于选择性数据, 我用了 https://simonbengtsson.github.io/jsPDF-AutoTable/#spans

https://github.com/simonbengtsson/jsPDF-AutoTable/blob/master/examples/examples.js#L258
以供参考。

在上面的示例中,colspan仅在第一页上实现,我也想在其他页面上继续使用。特别是在出现分页符的情况下,我想将colspan实现为位于标题下方的右侧

but the colspan is rendered at the beginning of the second page

这是我的working demo code that I have done so far 以下是我的示例代码

  function createTableinPDF(tableData) {
  var doc = new jsPDF("l", "pt");
  doc.setFontSize(12);
  doc.setTextColor(0);
  doc.setFontStyle("bold");
  doc.text("Account : ABC", 40, 20);
  doc.text(" ID   : 1", 40, 40);

  doc.autoTable(tableData.columns, tableData.rows, {
    theme: "grid",
    startY: 50,
    styles: { overflow: "linebreak", columnWidth: "wrap" },
    drawRow: function(row, data) {
      // Colspan

      doc.setFontStyle("bold");
      doc.setFontSize(10);
      //adding page
      var previousEndpointName =
        row.index === 0
          ? ""
          : data.table.rows[data.row.index - 1].raw.endPointName;
      var currentendPOintName =
        data.table.rows[data.row.index].raw.endPointName;
      console.log(currentendPOintName);
      var nextendPointName =
        data.table.rows.length - 1 === row.index
          ? ""
          : data.table.rows[data.row.index + 1].raw.endPointName;
      var countofItems = data.table.rows.filter(
        x => x.raw.endPointName === currentendPOintName
      ).length;
      var allCellsHeight = data.table.rows
        .filter(function(x) {
          return x.raw.endPointName === currentendPOintName;
        })
        .map(rowdata => rowdata.height)
        .reduce((a, x) => a + x);
      var posY = row.y + allCellsHeight + data.settings.margin.bottom;
      var pageHeight =
        doc.internal.pageSize.height || doc.internal.pageSize.getHeight();

      if (
        row.index === 0 ||
        row.index === 8 ||
        row.index === 17 ||
        row.index === 23
      ) {
        var posY = row.y + allCellsHeight + data.settings.margin.bottom;
        var pageHeight =
          doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
        if (posY > pageHeight) {
          data.addPage();
          row.y = 0;
        }
        doc.setTextColor(200, 0, 0);
        doc.rect(
          data.settings.margin.left,
          row.y,
          data.table.width + 27.5,
          15,
          "S"
        );
        doc.autoTableText(
          currentendPOintName,
          data.settings.margin.left + data.table.width / 2,
          row.y + 15 / 2,
          {
            halign: "center",
            valign: "middle"
          }
        );
        data.cursor.y += 15;
      }
    },
    columnStyles: {
      criteriaName: { columnWidth: 80 },
      criteriaInc: { columnWidth: 355 },
      criteriaExc: { columnWidth: 355 }
    }
  });
  doc.save("table-colspan.pdf");
}

如果有人可以帮助我,将不胜感激。

0 个答案:

没有答案