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

Question

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

Demandé el 15 de Mars, 2012: Quand la question a-t-elle été
84129 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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

J'aimerais 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 à ça :

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

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

Y a-t-il un moyen pour moi de mettre ce div dans le content ?

Demandé el 15 de Mars, 2012 par Naftuli Tzvi Kay

Answer 1

3 Réponses

Answer 2

44voto

Adam Points 3323

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)

Répondu el 16 de Mars, 2012 par Adam (3323 Points )

Answer 3

10voto

zeffren Points 101

Pour inclure à la fois l'en- tête et le pied de page sur les pages (en développant une 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 l' autre contenu du corps (pour le contenu de plusieurs pages)

Répondu el 29 de Novembre, 2017 par zeffren (101 Points )

Answer 4

5voto

Fred K Points 1370

J'ai passé beaucoup de temps à faire fonctionner cela sur Chrome, Firefox et Safari modernes. Je l'utilise pour créer un PDF à partir de HTML. Vous obtiendrez un en-tête et un pied de page fixés à chaque page sans chevaucher le contenu de la page. Essayez-le :

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>

HTML

 <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>

Répondu el 27 de Septembre, 2019 par Fred K (1370 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: