Como mostrar numeração nas paginas HTML (**1 de N**) ao imprimir ? | Front-end

Como mostrar numeração nas paginas HTML (1 de N) ao imprimir ? Achei esse codigo mas não funciona corretamente, gostaria de um mais simples e funcional para hoje em dia :

<label class="pag pag1"></label>
<script>
        var bottom = 0;
        var pagNum = 2;
        $(document).ready(function() {
            $("tr:nth-child(7n)").each(function() {
                bottom -= 100;
                botString = bottom.toString();
                var $counter = $('.pag1').clone().removeClass('pag1');
                $counter.css("bottom", botString + "vh");
                numString = pagNum.toString();
                $counter.addClass("pag" + numString);
                ($counter).insertBefore('.insert');
                pagNum = parseInt(numString);
                pagNum++; /* Next number */
            });
            var pagTotal = $('.pag').length;
            pagTotalString = pagTotal.toString();
            $("[class^=pag]").each(function() {
                var numId = this.className.match(/\d+/)[0];
                document.styleSheets[0].addRule('.pag' + numId + '::before', 'content: "' + numId + ' / ' + pagTotalString + '";');
            });
        });
    </script>

Oi, Alison, tudo bem?

Realmente, é comum que algumas funcionalidades sejam mais complexas de serem executadas que outras, como, por exemplo, a adição de um código para mostrar a numeração das páginas HTML ao imprimir. Contudo, por padrão, quando imprimimos uma página da internet, ela já vem com a numeração no canto inferior direito. Para isso, basta manter na seção Mais configurações (More settings) a opção Escala (Scale) como Padrão (Default).

Imagem da tela de impressão de uma página na web

Mas caso você queira implementar um código que faça isso, você pode optar por algo assim:

<html>
    <head>
        <style type="text/css">
            @page {
              size: A4;
              margin: 0; 
            }

            body {
              margin: 0;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
          window.onload = addPageNumbers;

          function addPageNumbers() {
            var totalPages = Math.ceil(document.body.scrollHeight / 1123);  //842px A4 pageheight for 72dpi, 1123px A4 pageheight for 96dpi, 
            for (var i = 1; i <= totalPages; i++) {
              var pageNumberDiv = document.createElement("div");
              var pageNumber = document.createTextNode("Page " + i + " of " + totalPages);
              pageNumberDiv.style.position = "absolute";
              pageNumberDiv.style.marginTop = "calc((" + i + " * (297mm - 0.5px)) - 40px)"; //297mm A4 pageheight; 0,5px unknown needed necessary correction value; additional wanted 40px margin from bottom(own element height included)
              pageNumberDiv.style.height = "16px";
              pageNumberDiv.appendChild(pageNumber);
              document.body.insertBefore(pageNumberDiv, document.getElementById("content"));
              pageNumberDiv.style.left = "calc(100% - (" + pageNumberDiv.offsetWidth + "px + 20px))";
            }
          }
        </script>
        <div id="content">
            Lorem ipsum....
        </div>
    </body>
</html>

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Como mostrar numeração nas paginas HTML (1 de N) ao imprimir ?

Chegou a hora de transformar