15

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 plugin , but I am writing without HTML.

var doc = new jsPDF("portrait","px","a4");
2
  • 1
    github.com/MrRio/jsPDF you can refer this age
    – Ivin Raj
    Nov 4, 2015 at 6:36
  • I have tried looking into this api documentation , but did not found any way for adding footer . Do you have any idea how to do this? Nov 4, 2015 at 6:37

8 Answers 8

21

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()
1
  • 1
    I am calling footer function before addPage() method , but it is not getting called if pdf is of one page only , as there is no page to add. Nov 4, 2015 at 8:43
16

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()
8

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).

1
  • Thnks for answering , I am stuck with another problem with jspdf . Because it does not support utf8 or multi character support May 24, 2017 at 20:17
8

Run this function before you run doc.save()

function addFooters() {
    const pageCount = doc.internal.getNumberOfPages();
    for(var i = 1; i <= pageCount; i++) {
        doc.text(String(i), 196, 285);
    }
}
1
  • 1
    There are so many complicated answers, but this simple answer did the trick for me. Works perfectly with multiple autotables. (Be sure to change the units to match your doc units) Mar 28, 2021 at 22:02
3

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.

3

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');
1

After digging into the code, I think the feature you ask is not implemented. But there is a function to generate a footer from html and you can use this code to fullfill your need. But beware some part of the code is marked as "bad hack".

From plugins/from_html.js

checkForFooter = function (elem, renderer, elementHandlers) {
    //check if we can found a <footer> element
    var footer = elem.getElementsByTagName("footer");
    if (footer.length > 0) {

        footer = footer[0];

        //bad hack to get height of footer
        //creat dummy out and check new y after fake rendering
        var oldOut = renderer.pdf.internal.write;
        var oldY = renderer.y;
        renderer.pdf.internal.write = function () {};
        DrillForContent(footer, renderer, elementHandlers);
        var footerHeight = Math.ceil(renderer.y - oldY) + 5;
        renderer.y = oldY;
        renderer.pdf.internal.write = oldOut;

        //add 20% to prevent overlapping
        renderer.pdf.margins_doc.bottom += footerHeight;

        //Create function render header on every page
        var renderFooter = function (pageInfo) {
            var pageNumber = pageInfo !== undefined ? pageInfo.pageNumber : 1;
            //set current y position to old margin
            var oldPosition = renderer.y;
            //render all child nodes of the header element
            renderer.y = renderer.pdf.internal.pageSize.height - renderer.pdf.margins_doc.bottom;
            renderer.pdf.margins_doc.bottom -= footerHeight;

            //check if we have to add page numbers
            var spans = footer.getElementsByTagName('span');
            for (var i = 0; i < spans.length; ++i) {
                //if we find some span element with class pageCounter, set the page
                if ((" " + spans[i].className + " ").replace(/[\n\t]/g, " ").indexOf(" pageCounter ") > -1) {
                    spans[i].innerHTML = pageNumber;
                }
                //if we find some span element with class totalPages, set a variable which is replaced after rendering of all pages
                if ((" " + spans[i].className + " ").replace(/[\n\t]/g, " ").indexOf(" totalPages ") > -1) {
                    spans[i].innerHTML = '###jsPDFVarTotalPages###';
                }
            }

            //render footer content
            DrillForContent(footer, renderer, elementHandlers);
            //set bottom margin to previous height including the footer height
            renderer.pdf.margins_doc.bottom += footerHeight;
            //important for other plugins (e.g. table) to start rendering at correct position after header
            renderer.y = oldPosition;
        };

        //check if footer contains totalPages which shoudl be replace at the disoposal of the document
        var spans = footer.getElementsByTagName('span');
        for (var i = 0; i < spans.length; ++i) {
            if ((" " + spans[i].className + " ").replace(/[\n\t]/g, " ").indexOf(" totalPages ") > -1) {
                renderer.pdf.internal.events.subscribe('htmlRenderingFinished', renderer.pdf.putTotalPages.bind(renderer.pdf, '###jsPDFVarTotalPages###'), true);
            }
        }

        //register event to render footer on every new page
        renderer.pdf.internal.events.subscribe('addPage', renderFooter, false);
        //render footer on first page
        renderFooter();

        //prevent footer rendering
        SkipNode['FOOTER'] = 1;
    }
};
0

In case someone wants to add the footer or header in html or text format, here i do both:


    let header: any = document.querySelector('#header');
    html2canvas(header).then((headerCanvas) => {
          let doc = new jsPDF({
            orientation: 'portrait',
            format: 'a4',
            unit: 'pt'
          });
          let widthInMm = 500; // Set the width of the PDF content in millimeters
          pdf.style.width = '600px';
          if (pdf) {
            doc.html(pdf, {
              x: 0,
              y: 0,
              html2canvas: {
                width: widthInMm,
                height: pdf.offsetHeight
              },
              margin: [150, 0, 20, 0],
              autoPaging: 'text',
              callback: async function (doc) {
                const pageCount = (doc as any).internal.getNumberOfPages();
                // For each page, print the page number and the total pages
                for (let i = 1; i <= pageCount; i++) {
                  // Go to page i
                  doc.setPage(i);
                  var pageSize = doc.internal.pageSize;
                  var pageHeight = pageSize.height
                    ? pageSize.height
                    : pageSize.getHeight();
                  doc.text(
                    'Page ' + String(i) + ' / ' + String(pageCount),
                    doc.internal.pageSize.getWidth() - 60,
                    pageHeight - 8
                  ); //
                  const pagewidth = doc.internal.pageSize.getWidth();
                  doc.addImage(headerCanvas, 'PNG', 10, 10, pagewidth - 20, 130);
                }
        }
    }
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.