Naf*_*Kay 45 pdf pdf-generation flying-saucer css-paged-media
我正在使用Flying Saucer(将CSS/HTML转储到iText到PDF)创建PDF,我正在尝试使用CSS3将图像页眉和页脚应用到每个页面.
我基本上想把这个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？
Ada*_*dam 40
将元素放在每个页面的顶部:
@page {
@top-center {
content: element(pageHeader);
}
}
#pageHeader{
position: running(pageHeader);
}
参见http://www.w3.org/TR/css3-gcpm/#running-elements(适用于飞碟)
我花了很多时间才让它在现代 Chrome、Firefox 和 Safari 上运行。我用它从 HTML 创建 PDF。您将把页眉和页脚固定到每个页面，而不与页面内容重叠。尝试一下：
CSS
<style>
@page {
margin: 10mm;
}
body {
font: 9pt sans-serif;
line-height: 1.3;
/* Avoid fixed header and footer to overlap page content */
margin-top: 100px;
margin-bottom: 50px;
}
#header {
position: fixed;
top: 0;
width: 100%;
height: 100px;
/* For testing */
background: yellow;
opacity: 0.5;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
font-size: 6pt;
color: #777;
/* For testing */
background: red;
opacity: 0.5;
}
/* Print progressive page numbers */
.page-number:before {
/* counter-increment: page; */
content: "Page: " counter(page);
}
</style>
超文本标记语言
<body>
<header id="header">Header</header>
<footer id="footer">footer</footer>
<div id="content">
Here your long long content...
<p style="page-break-inside: avoid;">This text will not be broken between the pages</p>
</div>
</body>
小智 8
要包括两个页眉和页脚网页(详细阐述了从@Adam优秀的答案):
<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>
注意:为了在每个页面上重复页脚,可能需要在其他正文内容之前定义页脚(对于多页内容)