How can I add page numbers to PDFKit generated PDFs?

S

4

10

I have multiple pages generated using PDFKit. How can I add page numbers to the bottom?

Saffier answered 17/2, 2011 at 19:36 Comment(0)

M

13

you need to specify a footer like this:

kit = PDFKit.new(your_html_content_for_pdf, :footer_html => "#{path_to_a_footer_html_file}")

then in the footer file have this:

<html>
  <head>
    <script type="text/javascript">
      function subst() {
        var vars={};
        var x=document.location.search.substring(1).split('&');
        for(var i in x) {var z=x[i].split('=',2);vars[z[0]] = unescape(z[1]);}
        var x=['frompage','topage','page','webpage','section','subsection','subsubsection'];
        for(var i in x) {
          var y = document.getElementsByClassName(x[i]);
          for(var j=0; j<y.length; ++j) y[j].textContent = vars[x[i]];
        }
      }
    </script>
  </head>
  <body style="margin: 0;" onload="subst();">
    Page <span class="page"></span> of <span class="topage"></span>
  </body>
</html>

elements of classes 'frompage','topage','page','webpage','section','subsection','subsubsection' will get substituted with the appropriate data

Marte answered 17/2, 2011 at 21:33 Comment(2)

hthanks, i wrapped the footer in <div id="footer"> and then styled in with kit.stylesheets << pdf.css ... but it didn't work...is there something special about the way the footer is treated? – Saffier 19/2, 2011 at 4:36

hello, I think I have a slight problem: I mass-merge multiple contacts of my letters into a single document...it may be a two page letter but I have 15 of them, so it shows page numbers as 1...31....can I change that? – Saffier 20/2, 2011 at 6:42

C

16

PDFKit.configure do |config|
  config.default_options = {
    header_right: "Page [page] of [toPage]"
  }
end

kit = PDFKit.new(body_html)

Read all detailed documentation here:
http://madalgo.au.dk/~jakobt/wkhtmltoxdoc/wkhtmltopdf-0.9.9-doc.html

PDFKit is just a wrap up for wkhtmltopdf application that is written in C.

Contrivance answered 10/6, 2011 at 18:20 Comment(3)

Works great, seems easier than the script option. Only thing is is should be underscored ie header_right – Puritan 24/9, 2012 at 18:49

This answer should be accepted. Please note the commented what @Puritan mentioned. Needs to be header_right. footer_right also works. – Littlefield 15/8, 2013 at 11:53

@hendrik This solution will not work if you use footer_html option. – Derma 17/9, 2018 at 9:18

M

13

you need to specify a footer like this:

kit = PDFKit.new(your_html_content_for_pdf, :footer_html => "#{path_to_a_footer_html_file}")

then in the footer file have this:

<html>
  <head>
    <script type="text/javascript">
      function subst() {
        var vars={};
        var x=document.location.search.substring(1).split('&');
        for(var i in x) {var z=x[i].split('=',2);vars[z[0]] = unescape(z[1]);}
        var x=['frompage','topage','page','webpage','section','subsection','subsubsection'];
        for(var i in x) {
          var y = document.getElementsByClassName(x[i]);
          for(var j=0; j<y.length; ++j) y[j].textContent = vars[x[i]];
        }
      }
    </script>
  </head>
  <body style="margin: 0;" onload="subst();">
    Page <span class="page"></span> of <span class="topage"></span>
  </body>
</html>

elements of classes 'frompage','topage','page','webpage','section','subsection','subsubsection' will get substituted with the appropriate data

Marte answered 17/2, 2011 at 21:33 Comment(2)

hthanks, i wrapped the footer in <div id="footer"> and then styled in with kit.stylesheets << pdf.css ... but it didn't work...is there something special about the way the footer is treated? – Saffier 19/2, 2011 at 4:36

hello, I think I have a slight problem: I mass-merge multiple contacts of my letters into a single document...it may be a two page letter but I have 15 of them, so it shows page numbers as 1...31....can I change that? – Saffier 20/2, 2011 at 6:42

G

10

I did page number with PDFKit, just by adding this:

%meta{:name => 'pdfkit-footer_right', :content => "[page]"}

in my haml file, in my RoR project.

Greer answered 5/6, 2012 at 19:27 Comment(0)

A

0

For some weird reason, ( perhaps because I'm using slim ) - I have to use single quotes around the content, instead of double quotes - or else it attempts to escape the brackets and raw text "[page]" shows up, so try single quotes if you run into this issue with your pages.

Antakiya answered 4/4, 2013 at 17:47 Comment(0)

Recommended topics

Hot tags