如何使用jspdf/autotable在最后一页显示表格页脚？

Question

我的自动表有问题。我的表由 thead、tbody 和 tfoot 组成。我的 tfoot 是我每列的总价值。我能够生成 pdf，但 tfoot 或总页脚不断在每一页上打印。我在检查文档时使用

showFoot: 'lastPage'

但没有帮助。不知道为什么我放的时候没有什么不同

这是我的代码：

$(document).on("click", "#btnExportToPDF", function (e) { 
    e.preventDefault();
    var date = "as of "+(new Date()).toString().split(' ').splice(1,3).join(' ');
    $("#loading").show();

    var title = '12 Years Forecast';

    // === Calculate text width ====
    var text_width = $.fn.textWidth(title,'14px');
    var half_width = (text_width/2); //times pt unit


    var doc = new jsPDF('l', 'pt');
    var totalPagesExp = '{total_pages_count_string}'
    var base64Img = 'data:image/png;base64,;

    if (base64Img) {
        doc.addImage(base64Img, 'JPEG', 40, 8, 140,30, 'MEDIUM')
    }

    doc.autoTable({
        html: '#year_table',
        startY: 50,
        didDrawPage: function (data) {
            var pageSize = doc.internal.pageSize

        },
        // pageBreak: 'avoid',
        bodyStyles: {
            fontSize: 8,
             halign: 'right',
        },
        headStyles: {
            fontSize: 10,
            halign: 'center'
        },   
    });
    doc.autoTable({
        html: '#clients_table',
        startY: doc.lastAutoTable.finalY + 25,
        didDrawPage: function (data) {
            var pageSize = doc.internal.pageSize
          // Header
            doc.setFontSize(14)
            doc.setTextColor(40)
            doc.setFontStyle('bold')
            doc.text(title, (doc.internal.pageSize.getWidth()/2)-half_width, 22)
            doc.setFontSize(10)
            doc.setTextColor(150);
            doc.setFontStyle('nomal')
            doc.text(date, (doc.internal.pageSize.getWidth()/2)-42, 33)

              // Footer
            var str = 'Page ' + doc.internal.getNumberOfPages()
              // Total page number plugin only available in jspdf v1.0+
            if (typeof doc.putTotalPages === 'function') {
                str = str + ' of ' + totalPagesExp
            }
            doc.setFontSize(10)
            doc.setTextColor(150);
              // jsPDF 1.4+ uses getWidth, <1.4 uses .width
            var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight()
              doc.text(str, 40, pageHeight - 10)
        },

        // pageBreak: 'avoid',
        headStyles: {
            fontSize: 10,
            halign: 'center'
        },
        bodyStyles: {
            fontSize: 8,
            halign: 'right',
            company: {
                halign: 'left',
            }
        },
        columnStyles: {
            0: {
                halign : 'left',
                textColor: [28, 126, 214],
            },
        },
        footStyles:{
            fontSize: 10,
            halign: 'right'
        },
        drawCell: function(cell, data) {
            if (data.table.rows.length  === 0 || data.table.rows.length - 1) {
              cell.styles.setFontStyle = 'bold';
            }
          },
        showFoot: 'lastPage',
    });
        // Total page number plugin only available in jspdf v1.0+
    if (typeof doc.putTotalPages === 'function') {
        doc.putTotalPages(totalPagesExp)
    }
    doc.save("reports.pdf")
    $("#loading").hide();
});

希望有人能帮助我解决这个问题。我找不到任何讨论此问题的文档或论坛。谢谢。

Answer 1

添加

showFoot: 'lastPage'

对我有用。 我将在下面添加一个示例代码段。

doc.autoTable({
    startY: currentHeight,
    head: ["#", "Loan Id", "Customer Name", "Invoice Id", "Amount", "Late Fee"],
    body: param.tableBody,
    foot: [["", "", "", "Total", "1000", "60"]],,
    didParseCell: (data) => {
      if (data.cell && data.cell.section === "head") {
        switch (data.cell.raw) {
          case "Amount":
            data.cell.styles.halign = "right";
            break;
          case "Late Fee":
            data.cell.styles.halign = "right";
            break;
          default:
            data.cell.styles.halign = "left";
            break;
        }
      }
      if (data.cell && data.cell.section === "foot") {
        data.cell.styles.halign = "right";
      }
    },
    columnStyles: {
      4: { halign: "right" },
      5: { halign: "right" },
    },
    headStyles: {
      fillColor: [217, 217, 214],
      textColor: [0, 0, 0],
      fontSize: 10,
    },
    footStyles: {
      fillColor: [217, 217, 214],
      textColor: [0, 0, 0],
      fontSize: 12,
    },
    showFoot: "lastPage",
  });

Answer 2

您使用的 showFoot 指令引用表格中的标签。

要添加页码，我这样做了：

  /* Per https://newbedev.com/adding-footer-to-pdf-using-jspdf */
  addFooters = doc => {
    console.log("Adding footers...");
    const pageCount = doc.internal.getNumberOfPages()

    doc.setFont('helvetica', 'italic')
    doc.setFontSize(8)
    for (var i = 1; i <= pageCount; i++) {
      doc.setPage(i)
      doc.text('Page ' + String(i) + ' of ' + String(pageCount), 
                      doc.internal.pageSize.width - 10,
                      doc.internal.pageSize.height - 10, { align: 'right' })
    }

这会将页码放在右下角。

然后在我的 doc.save() 命令之前我有这个：

// Inject (headers and) footers
//this.addHeaders(doc);   
this.addFooters(doc);

Answer 3

对于表页脚“showFoot: 'lastPage'”效果很好

(任意文档).autoTable({ 头：头数组， 正文：dataArr， 脚：totalObj， 主题：“简单”， 表格线条颜色: [0, 0, 0], 表格线宽：0.2，

  didParseCell: (data: any) => {       

    if (data.cell && data.cell.section === "head") {
      data.cell.styles.halign = "center";
    }
    if (data.cell && data.cell.section === "foot") {
      console.log(data);
      switch (data.cell.raw) {
        case "Total":
          data.cell.styles.halign = "left";
          break;
        default:
          data.cell.styles.halign = "right";
          break;
      }
    }
    if ((data.cell && data.cell.section === "body") && (isNaN(data.cell.text) == false)) {

      data.cell.styles.halign = "right";

      if (data.column.index == dataArr[0].length - 1 || data.column.index == dataArr[0].length - 2 && (headerArray[0] && headerArray[0][data.column.index].indexOf('TOTAL') > -1)) {
        data.cell.styles.textColor = '#0000FF';

      }
    }
    if ((data.cell && data.cell.section === "foot") && (isNaN(data.cell.text) == false)) {
      if (data.column.index == dataArr[0].length - 1 || data.column.index == dataArr[0].length - 2) {
        data.cell.text[0] = String(this.roundToTwo(Number(data.cell.text[0])));
      }
    }
  },
  showFoot: 'lastPage',
  bodyStyles: {
    lineWidth: 0.1,
    cellPadding: .5,
    fontSize: '6.5',
    fontStyle: 'bold',
    tableLineWidth: 0.2,
    lineColor: [0, 0, 0],
  },
  headStyles: {
    lineWidth: 0.5,
    cellPadding: 1,
    tableLineColor: [0, 0, 0],
    textColor: [255, 255, 255],
    fillColor: [0, 0, 0],
    tableLineWidth: 0.3,
    fontSize: '6.5',
    fontStyle: 'bold',
    lineColor: [0, 0, 0],


  },

  footStyles: {
    lineWidth: 0.5,
    cellPadding: 1,
    tableLineColor: [0, 0, 0],
    textColor: [255, 255, 255],
    fillColor: [0, 0, 0],
    fontSize: '6',
    tableLineWidth: 0.3,
    lineColor: [0, 0, 0]
  }
})