Search code examples
jspdf

jsPDF - Print current pagenumber in footer of all pages

Im trying to print the current page numbers using this: https://github.com/MrRio/jsPDF/pull/260

But jsPDF renders a huge amount of blank pages and crashes :(

Without the footer, every thing works fine and I get a nice PDF with 27 pages, but without footers ofcause

Console errors:

my footer is:

<footer>
    <div style='text-align:center;'>Page <span class="pageCounter"></span>/<span class="totalPages"></span></div>
</footer>

and heres my Jquery part:

var doc = new jsPDF();
var margins = {
  top: 10,
  left: 10,
  right: 10,
  bottom: 20,
  width: 265
};

doc.setProperties({
 title: 'Title',
 subject: 'This is the subject',
 author: 'Author Name',
 keywords: 'generated, javascript, web 2.0, ajax',
 creator: 'Creator Name'
});

length = doc.internal.getNumberOfPages()

doc.fromHTML(response, margins.left, margins.top,{
    'width': margins.width // max width of content on PDF
},
function(){
    doc.save('noter.pdf');
}, margins);
Solution

  • Very strange! but apparently, the footer needs to have a <p> tag to make it work, even though it isen´t like that in the example on the github page...

    So I´ve changed

    <footer>
    <div style='text-align:center;'>Page <span class="pageCounter"></span>/<span class="totalPages"></span></div>
</footer>

    to

    <footer>
    <div><p>Page <span class="pageCounter"></span>/<span class="totalPages"></span></p></div>
</footer>

    and it works now