Start page numbering with a number other than 1

I’m working with a document set, and my first document starts for example with “Page 1” and ends on “Page 52.” I want the first page in the second document in the set to start with “Page 53” because it’s the next consecutive number. Can I achieve this somehow?

My environment:

• Google Chrome: 69.0 in headless mode
• Platform / OS version: Win10
• Node.js version: v8.11.3

What I have tried:

I’m using Headless Chrome to print out PDF files by using the printToPDF CDP method. I’ve tried to modify the content of <span class="pageNumber"></span> in a header or footer template. The Puppeteer API documentation note that headerTemplate and footerTemplate markup have the following limitations:

1. Script tags inside templates are not evaluated.
2. Page styles are not visible inside templates.

However, a GitHub comment mentioned that we can modify template content without any <script> tag as the following:

<div style="font-size: 10px;">
  <div id="test">header test</div>
  <img src='http://www.chromium.org/_/rsrc/1438879449147/config/customLogo.gif?revision=3' onload='document.getElementById("test").style.color = "green";this.parentNode.removeChild(this);'/>
</div>

I was not able to get a working example of this code. For my problem, I’ve tried to following:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="tmpimg" 
onload="var x = document.getElementById('pn').innerHTML; var y = 10; document.getElementById('pn').innerHTML = parseInt(x) + y; this.parentNode.removeChild(this);"/>
<span id="pn" class="pageNumber"></span>

What I’ve have expected:

I’ve expected that my page number on my first page will show 10, and 11 on the second, etc.

What happens instead:

The JavaScript code doesn’t run at all. @yale8848 mentioned in a comment that he has tried to use the value of pageNumber with JavaScript, but he has got an empty value.

I’ve also posted a StackOverflow question about the problem. Any ideas are welcome to resolve this issue.

[odykyi]

Hey!

use attribute footerTemplate with displayHeaderFooter for show pages originally using puppeteer API

await page.pdf({
  path: 'hacks.pdf',
  format: 'A4',
  displayHeaderFooter: true,
  footerTemplate: '<div><div class='pageNumber'></div> <div>/</div><div class='totalPages'></div></div>'
});

https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#pagepdfoptions

// footerTemplate <string> HTML template for the print footer. // Should be valid HTML markup with following CSS classes used to inject printing values into them: // - date formatted print date // - title document title // - url document location // - pageNumber current page number // - totalPages total pages in the document

[mafredri]

This method doesn’t allow you to execute JavaScript, but it does allow you to start page numbering from a different offset and should fit your use case:

The CSS:

.empty-page { page-break-after: always; visibility: hidden; }

The JS (e.g. via eval):

window.pageStart = {{pageCount}};
const emptyPages = Array.from({length: window.pageStart}).map(() => {
	const emptyPage = document.createElement('div');
	emptyPage.className = "empty-page";
	emptyPage.textContent = "empty";
	return emptyPage;
});
document.body.prepend(...emptyPages);

You’d replace {{pageCount}} with how many pages came before, so if you want page numbering to start at 53, pageCount = 52.

When creating the PDF, you can provide the range to skip the empty pages: setPageRanges: (totalPageCount+1) + "-".