how to add pagging here using html-CodePudding

How to Add Page Number in this html style for view page number like "page 1 out of page 1".

i want at the buttom of page after covert pdf to view like this:

"page 1 out of page 1"

anyone can help to do this style in html css here. ThankYou for Your Trying.Please help me with this.

const html = `<html>

  <body>



 
  <style>
  div {
    text-align: center; 
  }
  c{
    text-align: right;
  }

  @page {
    size: landscape;
  }

    .demo {
        border:1px solid #C0C0C0;
        border-collapse:collapse;
        padding:5px;
    
    }
    .demo th {
        border:1px solid #C0C0C0;
        padding:5px;
        background:#F0F0F0;
    }
    .demo td {
        border:1px solid #C0C0C0;
        padding:5px;
    text-align: center;
    }
</style>




<div>
<img src="https://www.comdelta.com.my/wp-content/uploads/2021/10/Logo.jpeg" 
alt="Comdelta Technologies Sdn. Bhd" 
width="200" height="100"/>
</div>

</html>

  </body>`;

CodePudding user response：

var pageNumber = 1
var totalPageNumber = 5
const html =`<!DOCTYPE html>
    <html>
      <body>
        <style>
          div {
            text-align: center;
          }
          c {
            text-align: right;
          }

          @page {
            size: landscape;
          }

          .demo {
            border: 1px solid #c0c0c0;
            border-collapse: collapse;
            padding: 5px;
          }
          .demo th {
            border: 1px solid #c0c0c0;
            padding: 5px;
            background: #f0f0f0;
          }
          .demo td {
            border: 1px solid #c0c0c0;
            padding: 5px;
            text-align: center;
          }
          .pagenumber-bottom {
            position: fixed;
            bottom: 10px;
            right: 10px;
          }
        </style>

        <div>
          <img
            src="https://www.comdelta.com.my/wp-content/uploads/2021/10/Logo.jpeg"
            alt="Comdelta Technologies Sdn. Bhd"
            width="200"
            height="100"
          />
          <div >
            page ${pageNumber} of ${totalPageNumber}
          </div>
        </div>
      </body>
    </html>`

In the above code the class pagenumber-bottom writes in the bottom right corner of the page. You can change CSS property bottom and right to change the poistioning.