Menu
An interesting use case has popped up for us, we are requiring that when we print a website the printed copy will have a page header and footer, and inside the footer the page number.
Anyone got any idea how to achieve this?
Note: Browser version can be the latest of anything, clients are other web developers.
623
If you are looking to add page numbers when printing under Chrome/Chromium, one easy solution is to use Paged. js. This JS library takes your HTML/CSS and cuts it into pages, ready to print as a book, that you will preview in your browser. It makes the @page and most the CSS3 specifications work for Chrome.
Refer to Adding Content to a Header or Footer for an example of how to create content for a header or footer. 2. Highlight numbered-header then the Edit button to open the Generated Text Editor. Place your cursor in the right hand cell of the header table, then choose Insert > Page Number.
There is no way to get a counter total with CSS counters so the only way I can think of getting the output you require is to duplicate the HTML (which may not be a big problem if the content is dynamically generated). Output the HTML once to get the total number of pages then again to get the current page.
You can add in header and footer any PDF element that you can add in a PDF page : HTML, text, image. Even more you can add page numbering in HTML elements from header and footer. The Full Description and a Code Sample can be accessed from the top tabs.
Depending on your required browser support.
@page { @bottom-right { content: counter(page) " of " counter(pages); } } Further reading:
164
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
