Printing Page number when printing html

Question

I have an HTML that I'm dynamically generating in my react application according to user inputs and the user can print it at the end. I want to print the page number on each page. All solutions that I could find on here were mostly outdated and I want a solution that works on Chrome. I tried paged.js but it applies its default style on my entire application when I did it:

<script>
    window.PagedConfig={
        auto: false
    };  
</script>

<div class="page-number"></div>

.page-number{
  content: counter(page)
}

the styles got removed but still the page numbers weren't showing when I clicked on print. I don't know where I'm going wrong with this Any help would be much appreciated.

Answer 1

Paged.js relies on the media type in a @media query to determine which styles you want applied on the screen and which you want applied when you print.

@media screen {  
  /* rules for screen only (paged.js will ignore these) */
}  
  
@media print {
  /* rules for print only  
}  

/* rules out here will be used both on screen and when printing */

read more