Adding Header & Footer For All Screens In Jspdf

I'm Trying to add a header and footer in all screens while downloading PDF. I have added table with mock data using jspdf-autotable and able to download it. But the header is comin

Solution 1:

AutoTable provides a list of hooks for customizing the content and styling of the table.

You can use didDrawPage hook for adding Header and Footer to your pages. You can do something like this:

doc.autoTable(columns, rows, {
  startY: doc.autoTable() + 70,

  margin: { horizontal: 10 },
  styles: { overflow: "linebreak" },
  bodyStyles: { valign: "top" },
  columnStyles: { email: { columnWidth: "wrap" } },
  theme: "striped",
  showHead: "everyPage",
  didDrawPage: function (data) {

    // Header
    doc.setFontSize(20);
    doc.setTextColor(40);
    doc.text("Report", data.settings.margin.left, 22);

    // Footervar str = "Page " + doc.internal.getNumberOfPages();

    doc.setFontSize(10);

    // jsPDF 1.4+ uses getWidth, <1.4 uses .widthvar pageSize = doc.internal.pageSize;
    var pageHeight = pageSize.height
      ? pageSize.height
      : pageSize.getHeight();
    doc.text(str, data.settings.margin.left, pageHeight - 10);
  }
});

Result: