问如何使用Chrome DevTools协议的printToPDF在页眉或页脚模板中修改第一个DevTools或执行JS

EN

我使用无头铬通过printToPDF CDP方法打印printToPDF文件。如果将displayHeaderFooter参数设置为true，则可以使用参数headerTemplate和footerTemplate设置特定的页眉和页脚。该协议提供了一些HTML类来显示一些信息，这些信息是：date、title、url、pageNumber、totalPages。

例如，我们可以将footerTemplate设置为<span class="pageNumber"></span>，以在页脚中显示当前的页码。我们还需要添加一些样式来正确地显示它。默认的页眉和页脚设置可以找到这里，呈现器C++组件是这里。

我想修改显示的pageNumber值。我的目标是从给定的数字中计算页数。

headerTemplate和footerTemplate标记的footerTemplate具有以下限制：

1. 不对模板中的脚本标记进行评估。
2. 页面样式在模板中不可见。

GitHub评论提供以下内容：

<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>

它说，如果我们在一个onload标记上使用一个img属性，那么我们可以在模板中运行JavaScript。然而，我无法重现结果，在屏幕截图下面的片段中显示了什么。

例如，下面的JavaScript可以从10中计数页面：

<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>

但不幸的是，这个脚本没有修改页面编号，我也不知道如何解决这个问题。我也尝试过使用纯CSS解决方案，但没有成功。

任何解决这个问题的想法都是欢迎的。