10

I have a table which populated with dynamic data and to handle that in printing i have applied some page breaks to it everything works fine but i need to show a pagination like "Page 1 of 3" and so on below every page while printing. I have tried with css but i can only print the current page number with it. is there any other way of achieving it ?? here is my code

   body {
        counter-reset: page;
    }
    .page-count:after {
        counter-increment: page;
        content: "Page " counter(page) " of " counter(pages);
    }
yaser
  • 159
  • 1
  • 2
  • 11

1 Answers1

15

Did you try this:

@page {
   @bottom-right {
    content: counter(page) " of " counter(pages);
   }
}
Edmar Miyake
  • 12,047
  • 3
  • 37
  • 38
  • 7
    Do you know any Browser that supports this at the moment? I tested Chrome and Firefox, however without results. Or is this solution only possible with special user-agents e.g. Prince? – Thomas Fankhauser Sep 12 '17 at 09:13
  • 2
    I'm using `Weasyprint` to generate a pdf table from my django app and this worked. Thanks. I rendered the same table in `Chrome` to see if the page numbers show up, but `Chrome` won't even paginate the output. So I can't say for sure if it works for browsers. But it does work for me with `WeasyPrint==0.42.2` – chidimo Feb 26 '18 at 08:07
  • 1
    This is working for me too Weasyprint. But one question. Is there a way to for the 1st page (title page) to not have the page number and for the page numbering to start at 1 on physical page 2? – Brad Rhoads Jun 05 '18 at 18:13
  • 9
    Doesn't work in any of the major broswers as of now. :) – GeForce RTX 4090 Aug 30 '19 at 15:35
  • It requires polyfills from e. g. https://pagedjs.org – silverdr Jun 10 '22 at 15:30