get printed page number of an element

问题

I'm working on a project that is involving converting PDF handbooks to html. I am trying to retain the value of a PDF when printed, while giving them a better ui on devices which aren't bound by the concept of pages. The issue that I am running into is that these handbooks have a Table of Contents with the page number of where each chapter/section begins. When viewing on a device, that list will just be in-page anchor links, but when printing I would like to get the page number of an element (such as which page the heading for Chapter 3 is on) and add it to the table of contents, especially after applying print styles like page-break-after:avoid;.

As an example, I would like to know what it would take to accurately add page numbers to the following wikipedia article's table of contents when printed. http://en.wikipedia.org/wiki/Character_mask

Edit: My thought is to use a print stylesheet to add page numbers when printing:

@page {
    @bottom {
        content: "Page " counter(page) " of " counter(pages)
    }
}

and then use javascript to detect the print using matchMedia/onbeforeprint (http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/) and then grab the page number from the content, but I'm not sure how to find that dynamically added content. Is that possible? Is there some other solution?

来源：https://stackoverflow.com/questions/15556777/get-printed-page-number-of-an-element