从网站打印页面，浏览所有浏览器（Chrome）

问题描述：

亲爱的所有人，我尝试了CSS位置：固定属性，但它在Firefox和IE上正常工作（针对IE6的黑客），但根本无法工作铬。我认为Chrome是最新的将会很容易支持它，但事实并非如此。我试过了< thead>，< tfoot> < tbody>再次在IE和Firefox中工作，但在Chrome中有问题。请任何人有一个替代解决方案。从网站打印页面，浏览所有浏览器（Chrome）

你好。我也遇到了这个问题。看起来像铬处理打印位置：固定不同于其他所有打印位置。该死......将深入挖掘这一个。 – mtness 2011-05-04 15:25:02

答

这是我使用的代码。注意我将html和身高都设置为100％。

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

这并不能解决问题。它将使页脚仅打印在最后一页上。它甚至可以在固定位置的浏览器中刹车。 – 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。

截至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。但是我正在使用这个库中的技术来对工作中的项目产生非常好的效果。

该错误已被标记为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中的错误。在某些情况下，内容与标题重叠。在我发布这个日期之前，仍然没有找到解决方案。

When printing tables in Google Chrome, content overlaps header

从网站打印页面，浏览所有浏览器（Chrome）

相关推荐