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

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;
    }
};