在打印到PDF時更改默認頁眉/頁腳

我試圖使用谷歌瀏覽器替代PhantomJS以將HTML呈現爲PDF。到目前爲止，它一直在爲我工作。我有我沒有發現任何方式翻譯下面PhantomJS代碼的唯一問題：在打印到PDF時更改默認頁眉/頁腳

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

但是我還沒有找到一種方法來複制這種在谷歌瀏覽器中的行爲無頭。

這是我的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得很好，但只能得到默認瀏覽器的頁眉和頁腳。任何方式來修改它們？

注意：我意識到我可以在頁面中使用JavaScript將元素附加到每個頁面的底部，但我更願意在導出/打印時更改由瀏覽器附加的頁腳，我們發現將它正確放置並且不會導致頁面中其他div的奇怪重新流動更爲可靠。

來源

2017-06-15 apokryfos

當鉻是在窗口模式下，則還它不支持更改頁眉和頁腳的內容，所以我認爲無頭的方法也不會支持。從代碼中的鏈接（https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDF）可以清楚地看到，在JavaScript中沒有這樣的參數 –

你會如何去添加元素每頁的頂部？我知道我們可以將這些元素添加到文檔的頂部，但我們將如何定位到最終PDF中每個頁面的頂部？ – kyriakos

@kyriakos你需要每個頁面元素都在它自己的'div'中，這樣纔有可能。這是一個解決方案，但不是一個好的解決方案。 – apokryfos

據this forum，目前還沒有辦法在谷歌瀏覽器做到這一點。您只需打開或關閉頁眉/頁腳即可。這通過註釋表示：

當前沒有辦法在打印文檔時編輯標題。您目前只能打開或關閉頁眉和頁腳，其中包括日期，網頁名稱，頁面URL和打印文檔的頁數。你可能想看看Chrome網上應用店，看看是否有您可以在Chrome上安裝任何方便的第三方擴展，可能適合你在印刷方面找什麼 - 有Source

可能作爲第三方擴展來獲得您正在尋找的功能，或者如您所建議的那樣，您可以使用JavaScript來附加您想要打印的元素。

來源

2017-06-26 07:15:19

有兩種解決方案，您的問題

A）了通過不留餘量推鉻頭：

@page { 
    margin: 0; 
    size: auto; 
}

或

@media print { 
    @page { margin: 0; } 
    body { margin: 1.6cm; } 
}

B）原本是Firefox的解決方案應該世界爲鉻

<html moznomarginboxes mozdisallowselectionprint>

一些示例：

<!DOCTYPE html> 
 
<html moznomarginboxes mozdisallowselectionprint> 
 
<head> 
 
<title>Print PDF without header</title> 
 
<style> 
 
@media print { 
 
    @page { margin: 0; } 
 
    body { margin: 1.6cm; } 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<p>Some Text in Paragraph to print!</p> 
 
<a href="javascript:print()">Print</a> 
 
</body> 
 
</html>

來源

2017-06-25 17:35:03

問題不在於推出默認的chrome頁眉/頁腳，而是關於自定義它們。 – apokryfos

那麼Chrome的行爲是當你推出它，標題選項將被淘汰，這是奇怪的，但它是真實的，試試這個，並會看到標題複選框已經消失了 –

可以使用<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 }刪除默認的頁眉和頁腳。

希望這會有所幫助。

來源

2017-09-22 15:41:09

這是對問題的更新/回答。如鉻64，有可能使用headerTemplate和footerTemplate參數printToPDF

實施例的代碼應工作：

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

來源

2018-03-07 08:47:00 apokryfos

在打印到PDF時更改默認頁眉/頁腳

回答

相關問題