使用CSS创建页眉和页脚以便打印

我使用Flying Saucer（将CSS/HTML转换为PDF到PDF）创建PDF，并试图使用CSS3将图像页眉和页脚应用于每页。使用CSS创建页眉和页脚以便打印

我基本上是喜欢把这个div中的每个页面的左上角：

<div id="pageHeader"> 
    <img src="..." width="250" height="25"/> 
</div>

我的CSS看起来有点像这样：

@page { 
    size: 8.5in 11in; 
    margin: 0.5in; 

    @top-left { 
     content: "Hello"; 
    } 
}

有我放的方式这个div在content？

来源

2012-03-15 Naftuli Kay

把一个元素在每个页面的顶部：

@page { 
    @top-center { 
    content: element(pageHeader); 
    } 
} 
#pageHeader{ 
    position: running(pageHeader); 
}

见http://www.w3.org/TR/css3-gcpm/#running-elements（作品飞碟）

来源

2012-03-16 18:02:06 Adam

哇，希望我早点知道这样，我一直在争取'背景image'做的不完整的方式。非常感谢！ – 2012-03-16 18:44:26

我试图采用这种方式，但由于某些原因，在Chrome中，标题仅显示在第一页上，而页脚仅显示在最后一页上。在Firefox中，这是完全破碎的。 – 2013-05-26 14:41:00

它适用于Firefox或Chrome吗？我尝试了两种方法，但对我无效：@ – Jaro 2013-05-29 08:59:21

要包括既页眉和页脚的页面（来自@过硬的答案阐述亚当）：

<style> 
@page { 

    margin: 100px 25px; 
    size: letter portrait; 

    @top-left { 
     content: element(pageHeader); 
    } 

    @bottom-left { 
     content: element(pageFooter); 
    } 
} 

#pageHeader{ 
    position: running(pageHeader); 
} 

#pageFooter{ 
    position: running(pageFooter); 
} 

</style> 
<body> 
    <header id="pageHeader">something from above</header> 
    <footer id="pageFooter">lurking below</footer> 

    <div>meaningful rambling...</div> 
</body>

注意：为了页脚在每一页上重复它可能会有必要把它定义前身体其他内容（多页内容）

来源

2017-11-29 22:08:39 zeffren

使用CSS创建页眉和页脚以便打印

回答

相关问题