pdf - pagina - Crear encabezados y pies de página usando CSS para imprimir
quitar encabezado y pie de pagina al imprimir javascript (2)
Estoy creando un PDF usando Flying Saucer (que descarga CSS / HTML a iText en un PDF) y estoy tratando de usar CSS3 para aplicar un encabezado y pie de página a cada página.
Básicamente me gustaría poner este div en la parte superior izquierda de cada página:
<div id="pageHeader">
<img src="..." width="250" height="25"/>
</div>
Mi CSS se parece a esto:
@page {
size: 8.5in 11in;
margin: 0.5in;
@top-left {
content: "Hello";
}
}
¿Hay alguna manera de poner este div en el content ?
Para incluir tanto el encabezado como el pie de página en las páginas (explicando la excelente respuesta de @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>
NOTA: Para que el pie de página se repita en cada página, puede ser necesario definirlo ANTES de otro contenido del cuerpo (para contenido de varias páginas)
Poniendo un elemento en la parte superior de cada página:
@page {
@top-center {
content: element(pageHeader);
}
}
#pageHeader{
position: running(pageHeader);
}
Ver http://www.w3.org/TR/css3-gcpm/#running-elements (funciona en Flying Saucer)