Feature Request: header/footer template page number literal string injection

There are currently several issues related to displaying headers and footers that are different between pages. Here’s a non-exhaustive list of related tickets:

#2167 #2089 #3383 #2961 #2916 #2089 #2484

Many of these issues stem from the lack of JS support in the header and footer templates as discussed in one of my previous issues: #2167. Looking at this list of issues, one of the common use-cases seems to be wanting to display headers or footers differently between pages. I wanted to propose a solution that would alleviate this main use-case while full script interpretation in the templates is still pending.

Currently the header and footer templates allow you to use class names to inject the page number into the html as referenced here. The current CSS spec does not provide a way to select elements based on content, but you can select elements based on attributes. My proposal is this: can the templates provide a way to inject the page number as a literal string in the html, and not through a class name. For example, a syntax like this:

<div>
    <h1 data-page="{{pageNumber}}">I only render on the first page</h1>
</div>

Which would be parsed as:

<div>
    <h1 data-page="1">I only render on the first page</h1>
</div>

Then using an inline style block, the page could be styled based on this data attribute like so:

<div>
    <style>
        h1{
            display: none;
        }
        h1[data-page="1"]{
            display: block;
        }
    </style>
    <h1 data-page="1">I only render on the first page</h1>
</div>

If this form of page number injection were possible it would likely alleviate this common use-case. Thanks for everyone’s hard work on this product!

[RockNHawk]

I resolved by generate PDF twice: first time: generate full PDF then get the pageCount; second time:gen the PDF page one by one and add a request parameter pageNumber=x then the page handle the request parameter to determine which page is current generating.

Last, megre all the PDF page into one PDF.

[stale[bot]]

We are closing this issue. If the issue still persists in the latest version of Puppeteer, please reopen the issue and update the description. We will try our best to accomodate it!