How to print with page numbers in @media print?

问题:

I have been seeking this answer for a while now and wasn't able to find anything that could work properly. I had these two ideas that kind of look like weren't working at all for quite sometime:

1. A method using @page with bottom-right. Link

2. A method using fixed footer. (Said to work in Firefox) Link

Is there any other way?

回答1:

After a while doing some research I think I got something cooking here which still needs some testing in different browsers, and maybe some perfectioning. For now, I've tested and seems to be working fine in Chrome.

Basically, blending in a little of both techniques I was able to create this idea that replicates (on load) a h3 for each p in the work (just so it runs enough for each page). They have position: absolute and each one subtracts 100vh so they go to the bottom of the other page.

Here it is: JSFiddle - Without Page Total

EDIT

Here's a new version capable of showing the page total: JSFiddle - With Page Total

Hope this has some use!