web-dev-qa-db-fra.com

Création d'en-têtes et de pieds de page à l'aide de CSS pour l'impression

Je crée un PDF en utilisant Flying Saucer (qui exporte CSS/HTML vers iText dans un PDF) et j'essaie d'utiliser CSS3 pour appliquer un en-tête et un pied de page à chaque page.

Je voudrais essentiellement mettre cette div en haut à gauche de chaque page:

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

Mon CSS ressemble un peu à ceci:

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

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

Existe-t-il un moyen pour moi de mettre cette div dans le content?

pdfpdf-generationflying-saucercss-paged-media
44
Naftuli Kay

Mettre un élément en haut de chaque page:

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

Voir http://www.w3.org/TR/css3-gcpm/#running-elements (fonctionne dans Flying Saucer)

40
Adam

Pour inclure les deux en-tête et pied de page sur les pages (développant l'excellente réponse 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>

REMARQUE: Pour que le pied de page se répète sur chaque page, il peut être nécessaire de le définir AVANT autre contenu du corps (pour contenu multi-pages)

8
zeffren