打印为 PDF 时更改默认页眉/页脚

Question

我正在尝试使用 Google Chrome 代替 PhantomJS 将 HTML 呈现为 PDF。到目前为止，它对我来说效果很好。唯一的问题是我还没有找到任何方法来翻译以下 PhantomJS 代码：

 page.paperSize = {
  footer: {
    contents: phantom.callback(function(pageNum, numPages) {
      return "Power by MyWebsite. Created on "+formatDate(new Date())+"<span style='float:right'>" + pageNum + " / " + numPages + "</span>";
    })
  }
}

格式日期与问题 How to format a JavaScript date 的 功能相同

但是，我还没有找到一种方法来无头地在 Google Chrome 中复制此行为。我正在使用来自 https://github.com/cyrus-and/chrome-remote-interface 的 Chrome 远程接口 (CDP)

这是我的 chrome 远程接口代码的概要：

 return new Promise(async function (resolve, reject) {
    const url = "<MyURL here>";
    const [tab] = await Cdp.List()
    const client = await Cdp({ host: '127.0.0.1', target: tab });
    await Promise.all([
       Network.enable(),
       Page.enable()
    ]);

    Page.loadEventFired(function () {
         setTimeout(function () {
             resolve(Page.printToPDF({displayHeaderFooter:true}))); //https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDF
         }, 3000);
    });
    await Page.navigate({ url });
};

我得到的 PDF 很好，但只能得到默认的 Chrome 页眉和页脚。有什么方法可以修改它们吗？

注意：我知道我可以在我的页面中使用 JavaScript 将元素附加到每个页面的底部，但我更愿意在导出/打印时更改浏览器附加的页脚，因为我发现它更可靠正确放置并且不会导致页面中其他 div 的任何奇怪的重新流动。

原文由 apokryfos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是问题的更新/答案。从 Chromium 64 开始，可以使用 headerTemplate 和 footerTemplate 参数到 printToPDF

使用 chrome 远程接口 这里是应该工作的示例代码：

 return new Promise(async function (resolve, reject) {
    const url = "<MyURL here>";
    const [tab] = await Cdp.List()
    const client = await Cdp({ host: '127.0.0.1', target: tab });
    await Promise.all([
       Network.enable(),
       Page.enable()
    ]);

    Page.loadEventFired(function () {
         setTimeout(function () {
    //https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDF
             resolve(Page.printToPDF({
                  displayHeaderFooter:true,
                  footerTemplate: "<span class='pageNumber'> of <span class='totalPages'>"
             })));
         }, 3000);
    });
    await Page.navigate({ url });
};

原文由 apokryfos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

可以使用 <header> 和 <footer> 标签创建自定义页眉和页脚。我用它来使用 Chrome Headless 生成 PDF。我还没有在 Firefox、IE 等中测试过它…

 <header>
  Custom Header
  <img src="http://imageurl.com/image.jpg"/>
</header>
<div class="content">Page Content - as long as you want</div>
<footer>
  Footer Content
</footer>

CSS

 @page {
  margin: 0;
}
@media print {
  footer {
    position: fixed;
    bottom: 0;
  }
  header {
    position: fixed;
    top: 0;
  }
}

@page { margin: 0 } 删除默认页眉和页脚。

希望这可以帮助。

原文由 Darren Hall 发布，翻译遵循 CC BY-SA 3.0 许可协议