title: How to modify the first pageNumber or execute JS in header or footer template with Chrome DevTools Protocol's printToPDF
body: <p>I'm using <a href="https://developers.google.com/web/updates/2017/04/headless-chrome" rel="noreferrer">Headless Chrome</a> to print out PDF files by using the <a href="https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDF" rel="noreferrer">printToPDF</a> CDP method. If we set <code>displayHeaderFooter</code> parameter to <code>true</code>, then we can set specific page header and footer by using the parameters <code>headerTemplate</code> and <code>footerTemplate</code>. The protocol provides some HTML classes to display some information, these are: <code>date</code>, <code>title</code>, <code>url</code>, <code>pageNumber</code>, <code>totalPages</code>.</p>
  
  <p>For example, we can set <code>footerTemplate</code> to <code>&lt;span class="pageNumber"&gt;&lt;/span&gt;</code> to display the current page number in the footer. We also need to add some style to display it properly. The default header and footer settings can be found <a href="https://cs.chromium.org/chromium/src/components/printing/resources/print_header_footer_template_page.html" rel="noreferrer">here</a>, and the renderer C++ component is <a href="https://cs.chromium.org/chromium/src/components/printing/renderer/print_render_frame_helper.cc?q=print_header_footer_template_page&amp;dr=C&amp;l=670" rel="noreferrer">here</a>.</p>
  
  <blockquote>
    <p>I would like to modify the displayed pageNumber values. My goal is to count pages from a given number.</p>
  </blockquote>
  
  <p>The <a href="https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagepdfoptions" rel="noreferrer">Puppeteer API documentation note</a> that <code>headerTemplate</code> and <code>footerTemplate</code> markup have the following limitations:</p>
  
  <ol>
  <li>Script tags inside templates are not evaluated.</li>
  <li>Page styles are not visible inside templates.</li>
  </ol>
  
  <p>A <a href="https://github.com/GoogleChrome/puppeteer/issues/2167#issuecomment-425448926" rel="noreferrer">GitHub comment</a> provides the following:</p>
  
  <pre><code>&lt;div style="font-size: 10px;"&gt;
    &lt;div id="test"&gt;header test&lt;/div&gt;
    &lt;img src='http://www.chromium.org/_/rsrc/1438879449147/config/customLogo.gif?revision=3' onload='document.getElementById("test").style.color = "green";this.parentNode.removeChild(this);'/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It says, if we use an <code>onload</code> attribute on an <code>img</code> tag, then we can run JavaScript in the templates. However, I was not able to reproduce the result, what is shown on the screenshot under the snipplet.</p>
  
  <blockquote>
    <p>For example, the following JavaScript could count pages from 10:</p>
  </blockquote>
  
  <pre><code>&lt;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);"/&gt;
  &lt;span id="pn" class="pageNumber"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>But unfortunately this script does not modify the page numbering, and I have no idea how to solve this problem. I've also tried to use pure CSS solutions, but without success.</p>
  
  <blockquote>
    <p>Any ideas are welcome to resolve this issue.</p>
  </blockquote>