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

本文介绍了打印为PDF时，请更改默认页眉/页脚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图使用Google Chrome作为PhantomJS的替代品，将HTML呈现为PDF格式。到目前为止，它一直在为我工作。我唯一的问题，我没有找到任何方式来翻译下面的PhantomJS代码：

  page.paperSize = {
 $ footer：{
 contents：phantom.callback（function（pageNum，numPages）{
 returnPower by MyWebsite。Created on+ formatDate（new Date（））+< span style = 'float：right'>+ pageNum +/+ numPages +< / span>; 
}）
} 
} 
  
 
 然而，我还没有找到一种方法可以在Google Chrome中无止境地复制此行为。 
 
 
 这是我的chrome远程接口代码的一个大纲： 
 
 
 返回新的Promise（异步函数（解析，拒绝）{
 const url =< MyURL here>; 
 const [tab] = await Cdp.List（）
 const client = await Cdp（{host：'127.0.0.1'，target：tab}）; 
等待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）; 
}）; 
等待Page.navigate（{url}）; 
}; 
  
我得到的PDF很好，但只能得到默认的Chrome页眉和页脚。任何方式来修改它们？
 
 
  注意：我意识到我可以在页面中使用JavaScript将元素附加到每个页面的底部，但我更愿意在导出/打印时更改浏览器附加的页脚，因为我发现它更加可靠，可以正确放置并且不会导致页面中其他div的奇怪重新流动。  
 
解决方案
这是对问题的更新/回答。从Chromium 64开始，可以使用 headerTemplate 和 footerTemplate 参数来 printToPDF  
 
 
 $ b 
 
 $ p $  return新的Promise（异步函数（解析，拒绝）{
 const url =< MyURL here>; 
 const [tab] = await Cdp.List（）
 const client = await Cdp （{host：'127.0.0.1'，target：tab}）; 
等待Promise.all（[
 Network.enable（），
 Page.enable（）
] ）; 
 
 Page.loadEventFired（function（）{
 setTimeout（function（）{
 //https://chromedevtools.github.io/devtools-protocol/tot/页面/＃method-printToPDF 
 resolve（Page.printToPDF（{
 displayHeaderFooter：true，
 footerTemplate：< span class ='pageNumber'>的< span class ='totalPages '>
}）））; 
}，3000）; 
}）; 
等待Page.navigate（{url}）; 
};

I'm trying to use Google Chrome as a replacement of PhantomJS to render HTML into PDF. So far it's been working well for me. The only issue I have that I have not found any way to translate the following PhantomJS code:

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>";
    })
  }
}

Format date is the same function as in question How to format a JavaScript date

However I have not found a way to replicate this behavior in Google Chrome in headless.

This is an outline of my chrome remote interface code:

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 });
};

I'm getting the PDF just fine but can only get the default Chrome headers and footers. Any way to modify them?

Note: I realise that I can use JavaScript in my page to append elements to the bottom of each page, but I'd prefer to alter the footer that is appended by the browser when exporting/printing as I've found it's much more reliable to get placed correctly and without causing any strange re-flowing of other divs in the page.

解决方案

This is an update/answer to the question. As of Chromium 64 it is possible using the headerTemplate and footerTemplate parameters to printToPDF

Example code that should work:

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 });
};

这篇关于打印为PDF时，请更改默认页眉/页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！