從網站打印頁面，瀏覽所有瀏覽器（Chrome）

親愛的所有人，我嘗試了CSS位置：固定屬性，但它在Firefox和IE上正常工作（針對IE6的黑客），但根本無法工作鉻。我認爲Chrome是最新的將會很容易支持它，但事實並非如此。我試過了< thead>，< tfoot> < tbody>再次在IE和Firefox中工作，但在Chrome中有問題。請任何人有一個替代解決方案。從網站打印頁面，瀏覽所有瀏覽器（Chrome）

來源

2010-09-21 Sagar Kadam

你好。我也遇到了這個問題。看起來像鉻處理打印位置：固定不同於其他所有打印位置。該死......將深入挖掘這一個。 – mtness 2011-05-04 15:25:02

-9

這是我使用的代碼。注意我將html和身高都設置爲100％。

@media print { 
    html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 
    #footer { 
    position: absolute; 
    bottom: 0; 
    } 
}

來源

2012-08-15 05:13:43 tim

這並不能解決問題。它將使頁腳僅打印在最後一頁上。它甚至可以在固定位置的瀏覽器中剎車。 – 2014-04-18 10:26:09

Chrome [webkit]似乎有不同的處理位置的方式：在打印樣式表中比其他瀏覽器更好。

所以這個問題的當前答案是：
在Chrome中沒有適當的解決方案。

儘管FF和IE在每一頁都呈現，但Opera根本沒有顯示它，而Webkit瀏覽器僅在第一頁顯示。

小測試文件：

<!DOCTYPE HTML> 
 
    <html lang="en-US"> 
 
    <head> 
 
    \t <meta charset="UTF-8"> 
 
    \t <title>print css test by mtness</title> 
 
    \t <style type="text/css"> 
 
    \t @media print { 
 
    \t \t #watermark { 
 
    \t \t \t display: block; 
 
    \t \t \t position: fixed; 
 
    \t \t \t top: 0; 
 
    \t \t \t right: 0; 
 
    \t \t \t z-index: 5; 
 
    \t \t } 
 
    
 
    \t \t p { 
 
    \t \t \t position: relative; 
 
    \t \t \t top: 40pt; 
 
    \t \t \t display: block; 
 
    \t \t \t page-break-after: always; 
 
    \t \t \t z-index: 0; 
 
    \t \t } 
 
    \t } 
 
    \t </style> 
 
    </head> 
 
    <body> 
 
    \t <div id="watermark">AWESOME!</div> 
 
    \t <p>page1</p> 
 
    \t <p>page2</p> 
 
    \t <p>page3</p> 
 
    </body> 
 
    </html>

進一步資源可能在這裏找到：
http://room118solutions.com/2011/03/31/styling-print-headers-and-footers-with-css/
http://css-discuss.incutio.com/wiki/Printing_Headers
http://www.andypemberton.com/css/print-watermarks-with-css/

測試頁：
http://www.andypemberton.com/sandbox/watermark/

HTH。親切的問候，mtness。

來源

2011-05-04 15:56:21 mtness

截至2015年6月，Chrome瀏覽器仍然如此。 – mtness 2015-06-25 06:11:06

請參閱我的回答以獲取針對此問題的更新可能的解決方案，@mtness – lastmjs 2015-12-23 22:53:10

[在打印頁面上重複表格標題]（https://bugs.chromium.org/p/chromium/issues/detail?id=24826）已得到修復於2016年6月5日在Chrome上發佈。我在Mac OS X上擁有版本51.0.2704.103，並且它可以正常工作。 – Ricardo 2016-07-05 19:25:50

編輯：顯然該錯誤已被修復，所以我下面分享的庫可能不再有太多的用處。

從我所有的研究中，沒有辦法獲得職位是正確的：固定在Chrome中工作。這是Chromium項目頁面上bug的鏈接。

與此同時，我創建了一個開源項目，允許您在Chrome中打印頁眉和頁腳。它是在發展的早期，但它的工作原理，這取決於你的HTML佈局結構：

https://github.com/byuarchdi/print-headers-and-footers

這是一個工作在進步，它在很大程度上依賴於CSS Regions Polyfill。但是我正在使用這個庫中的技術來對工作中的項目產生非常好的效果。

來源

2015-12-23 22:52:27 lastmjs

該錯誤已被標記爲2016年4月修復。 – 2017-01-24 11:31:40

它被修復了一段時間，至少在Android的web視圖中它似乎再次被破壞。很奇怪。 – fattire 2017-02-28 21:43:24

在Chrome中，我總是得到「未捕獲（承諾）TypeError：document.getNamedFlow不是函數」即使在您的示例中 – Ruwen 2017-05-23 11:18:20

我完成了使用表格，但僅限於chrome中的標題。我將重複的內容放在了tad中的標籤和頁面內容中，所以瀏覽器解釋正確。

但是，我遇到了大內容HTML中的錯誤。在某些情況下，內容與標題重疊。在我發佈這個日期之前，仍然沒有找到解決方案。