Adding Footer to pdf using jsPDF

Question

I am generating pdf from jsPDF api , I want to add footer to each page with page number .

How to achieve this . It is having option of adding footer from fromHTML p

Answer 1

It's work for me:

I just put coordenates for A4 Paper;

Just add the for before doc.save() like this;

// Create a document

var doc = new jsPDF('p','mm','a4');

// Some stuff
doc.text("Some text", 74, 150);
doc.addPage();
doc.text("Some text", 74, 150);
doc.addPage();
doc.text("Some text", 74, 150);
doc.addPage();
doc.text("Some text", 74, 150);
doc.addPage();
doc.text("Last page", 74, 150);

// PAGE NUMBERING
// Add Page number at bottom-right
// Get the number of pages
const pageCount = doc.internal.getNumberOfPages();

// For each page, print the page number and the total pages
for(var i = 1; i <= pageCount; i++) {
     // Go to page i
    doc.setPage(i);
     //Print Page 1 of 4 for example
    doc.text('Page ' + String(i) + ' of ' + String(pageCount),210-20,297-30,null,null,"right");
}

// Save the doc
doc.save('test.pdf');

Answer 2

Run this function before you run doc.save()

function addFooters() {
    const pageCount = doc.internal.getNumberOfPages();
    for(var i = 0; i < pageCount; i++) {
        doc.text(String(i),196,285);
    }
}

Answer 3

You have to implement it yourself. You can do something like this:

var doc = new jsPDF();
doc.page=1; // use this as a counter.

function footer(){ 
    doc.text(150,285, 'page ' + doc.page); //print number bottom right
    doc.page ++;
};

// and call footer() after each doc.addPage()

Answer 4

Stephen Collins is the best answer! It works well with jspdf-autotable plugin.

With this is made after all is added to the doc, so we can use easy the total page number!

Add some style to the Stephen Collins answer: "page x of total"

const addFooters = doc => {
  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 / 2, 287, {
      align: 'center'
    })
  }
}


let doc = new jsPDF()

doc.text(...)
doc.autoTable(...)
addFooters(doc)
doc.save()

Answer 5

I know this post is old but I'm going to offer another solution. First define your total amount of pages. There's multiple ways to determine this so I won't go into that.

        var doc = new jsPDF('p', 'pt', 'letter');
        doc.page = 1; // use this as a counter.
        var totalPages = 10; // define total amount of pages
        // HEADER
        doc.setFontSize(20);//optional
        doc.setTextColor(40);//optional
        doc.setFontStyle('normal');//optional
        doc.text("Report", 50, 22);// set your margins
        // FOOTER
        var str = "Page " + doc.page  + " of " +  totalPages;
        doc.setFontSize(10);// optional
        doc.text(str, 50, doc.internal.pageSize.height - 10);//key is the interal pageSize function


        // Add Page content
        .....


        //Add new page and increase page count
        doc.addPage();
        doc.page ++;
        //Begin process all over again.

This works well in a loop as you can set your page count by taking your array.length + 1 (as it's zero based).

Answer 6

If you need something like "current page / totalPage" displaying for each page. Using "Total page number" plugin available in jspdf v1.0+

How to use:

        var doc = new jsPDF();
        doc.page=1; // use this as a counter.
        var totalPagesExp = "{total_pages_count_string}";


        function footer(){ 
          var str = "Page " + doc.page;           
          if (typeof doc.putTotalPages === 'function') {
            str = str + "/" + totalPagesExp;
          }
          doc.text(150,285, str); //print number bottom right
        }

        // call footer() after each doc.addPage()

        // and before doc.save() do not forget put
        if (typeof doc.putTotalPages === 'function') {
            doc.putTotalPages(totalPagesExp);
        }

It should work. Hope this helps.