Creazione di intestazioni e piè di pagina utilizzando CSS per la stampa

Sto creando un PDF utilizzando Flying Saucer (che scarica CSS/HTML in iText in un PDF) e sto cercando di utilizzare CSS3 per applicare un'intestazione e un piè di pagina dell'immagine ogni pagina.Creazione di intestazioni e piè di pagina utilizzando CSS per la stampa

mi piacerebbe essenzialmente di mettere questo div in alto a sinistra di ogni pagina:

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

mio CSS sembra un po 'come questo:

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

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

Esiste un modo per me di mettere questo div nel content?

fonte

2012-03-15 Naftuli Kay

Mettere un elemento alla parte superiore di ogni pagina:

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

Vedi http://www.w3.org/TR/css3-gcpm/#running-elements (opere in disco volante)

fonte

2012-03-16 18:02:06 Adam

Wow, desiderano avrei conosciuto questo prima, ho combattuto 'background-image' a farlo nel modo meno completo. Grazie mille! –

Sto cercando di adottarlo, ma per qualche motivo in Chrome l'intestazione viene stampata solo sulla prima pagina e il piè di pagina solo nell'ultima pagina. In Firefox questo è completamente rotto. –

Funziona in Firefox o Chrome? L'ho provato entrambi, ma non funziona per me:/ – Jaro

Per includere sia intestazione e piè di pagine (elaborando risposta eccellente da @ Adamo):

<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: al fine di piè di pagina per ripetere in ogni pagina si può essere necessario definirlo PRIMA altri contenuti del corpo (per i contenuti multi-page)

fonte

2017-11-29 22:08:39 zeffren

Creazione di intestazioni e piè di pagina utilizzando CSS per la stampa

risposta

Problemi correlati