How to add Page Number in the header of webpage when printing when that webpage?

Question

Good day everyone this is my first time here so pls help me in better understanding

I am working on a project where I have to create computerized contracts for banks using html and they will be converted into PDF format. I am trying to add page numbers in the header of each page of the contract using html and css tags but my code is not responding any manner my codes is mentioned below.

@page {  
    @bottom-right {    
        content: counter(page);
    }
    @bottom-center{
    white-space: pre;
    content:'Read and Accepted \A Signed';
  }margin:2cm;
}

and this code is not working at all.

score 1 · Answer 1 · answered Apr 09 '23 at 23:29

This is a good question, but it has been asked before. It seems that while browsers support the basics of the @page declaration, such as sizing and margins, they don’t support adding content in the margins with @bottom-right etc. This has been an outstanding item in the Chromium bug list for almost ten years now. I can’t see this being fixed anytime soon.

I’d start by investigating pagedjs.org, as recommended by this answer and this answer. I just plugged it into my test web page and it worked beautifully, although note that it modifies both the screen and the print view of the page. If that’s not an issue for you, then happy days!

How to add Page Number in the header of webpage when printing when that webpage?

1 Answers1