I need to make sure my project works on Chrome since I am using electron, so using any other browser is not an option.
After searching for a solution to this issue without success, I attempted the following approach (taken from CSS page x of y for @media print):
The CSS code snippet is:
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
And here is the corresponding HTML code:
<div id="content">
<div id="pageFooter">Page </div>
multi-page content here...
</div>
While this method works in Firefox, it does not seem to have the desired effect in Chrome. The thead/tfoot
of Chrome repeats on every printed page in preview, but fails to increment the counter. The same value appears on each printed page.
I also explored options involving @page
, but these methods appear to have stopped working some time ago.
For example (from Browser Support for CSS Page Numbers):
@page {
counter-increment: page;
counter-reset: page 1;
@top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
Does anyone know a workaround for this issue? Or am I at a dead end? Any Javascript or Node.js solutions are appreciated.