En-tête et pied de page d'impression HTML

Question

En-tête et pied de page d'impression HTML

Demandé el 1 de Septembre, 2009: Quand la question a-t-elle été
98913 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Est-il possible d'imprimer des pages HTML avec des en-têtes et des pieds de page personnalisés sur chaque page imprimée ?

J'aimerais ajouter le mot "UNCLASSIFIED" en rouge, Arial, taille 16pt en haut et en bas de chaque imprimé page, quel que soit son contenu.

Pour clarifier, si le document a été imprimé sur 5 pages, chaque page doit avoir l'en-tête et le pied de page personnalisés.

Quelqu'un sait-il si cela est possible en utilisant HTML/CSS ?

Merci d'avance !

Demandé el 1 de Septembre, 2009 par Utilisateur non enregistré

3 votes

Ver Pourquoi utiliser XSL-FO au lieu de CSS2, pour transformer du HTML en bon PDF ? questions et réponses.

Commenté el 26 de Juillet, 2012 par Peter Krauss

0 votes

J'ai posté une solution compatible avec Chrome ici qui ajoutera un en-tête courant aux documents qui ne contiennent pas de trop grandes étendues de texte. Mais il n'y a toujours pas de solution pour les pieds de page.

Commenté el 17 de Septembre, 2014 par DoctorDestructo

7 votes

Solution combinée : les deux pisition: fixed y thead tbody tfoot Les techniques ont des inconvénients, vous devez donc les combiner, lire la suite ici .

Commenté el 15 de Avril, 2019 par Mohammad lm71

Afficher 1 autres commentaires

Answer 1

5 Réponses

Answer 2

5voto

jous Points 738

J'ai essayé de mener cette bataille futile en combinant les règles tfoot et css mais cela ne fonctionnait que sur Firefox :(. En utilisant les règles css simples, le contenu s'écoule au-dessus du pied de page. En utilisant tfoot, le pied de page de la dernière page ne reste pas bien en bas. Cela est dû au fait que les pieds de page des tableaux sont destinés aux tableaux, pas aux pages physiques. Testé sur Chrome 16, Opera 11, Firefox 3 & 6 et IE6.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Header & Footer test</title>

<style>

  @media screen {
    div#footer_wrapper {
      display: none;
    }
  }

  @media print {
    tfoot { visibility: hidden; }

    div#footer_wrapper {
      margin: 0px 2px 0px 7px;
      position: fixed;
      bottom: 0;
    }

    div#footer_content {
      font-weight: bold;
    }
  }

</style>
</head>

<body>

<div id="footer_wrapper">
  <div id="footer_content">
    Total 4923
  </div>
</div>

<TABLE CELLPADDING=6>

<THEAD>
<TR> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH> <TH>Qty</TH> </TR>
</THEAD>

<TBODY>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
</TBODY>

<TFOOT id="table_footer">
<TR> <TH ALIGN=LEFT COLSPAN=3>Total</TH> <TH>4923</TH> </TR>
</TFOOT>

</TABLE>

</body>
</html>

Répondu el 31 de Janvier, 2012 par jous (738 Points )

Answer 3

2voto

sparkalow Points 146

Si vous pouvez utiliser javascipt, demandez au client de se charger de la mise en page du contenu en utilisant javascript pour placer les éléments en fonction de l'espace disponible.

Vous pouvez utiliser le plugin jquery columnizer pour disposer dynamiquement votre contenu dans des blocs de taille fixe et positionner vos en-têtes et pieds de page dans le cadre de la routine de rendu. http://welcome.totheinter.net/columnizer-jquery-plugin/

Voir l'exemple 10 http://welcome.totheinter.net/autocolumn/sample10.html

Le navigateur ajoutera toujours ses propres en-têtes ou pieds de page s'il est activé dans le système d'exploitation. Une mise en page cohérente entre les plates-formes et les navigateurs nécessitera probablement des css conditionnels.

Répondu el 3 de Avril, 2013 par sparkalow (146 Points )

3 votes

La démo fournie ne fonctionne même pas (les pages ne se brisent pas, ne débordent pas les unes sur les autres, etc.), et encore moins avec un contenu plus universel.

Commenté el 18 de Janvier, 2014 par rainabba

1 votes

J'aurais dû clarifier. Les liens fournis sont des exemples d'une bibliothèque javascript pour la mise en page de contenu dans des conteneurs et ne sont pas conçus pour l'impression. Ce lien était censé être un exemple d'utilisation de js pour mettre en page du contenu dans des limites spécifiées. J'ai utilisé js comme moteur de rendu avec wkhtmltopdf pour créer des livres de recettes à partir du contenu de bases de données.

Commenté el 13 de Mars, 2014 par sparkalow

0 votes

La question porte sur l'impression.

Commenté el 13 de Septembre, 2017 par Greg Blass

Answer 4

0voto

escalte Points 9

Je cherchais un moyen de le faire et j'ai trouvé cette réponse d'Adam utilisant Running-Elements :

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

Répondu el 12 de Mars, 2013 par escalte (9 Points )

Answer 5

0voto

Adil Points 15

Cet article a été utile dans ma situation. Peut-être que certains d'entre vous peuvent en tirer profit.

http://www.tutorialspoint.com/css/css_paged_media.htm

Répondu el 10 de Janvier, 2014 par Adil (15 Points )

Answer 6

-1voto

JYelton Points 14014

Est-ce que c'est quelque chose que vous voulez imprimer seulement ? Vous pouvez l'ajouter à chaque page de votre site et utiliser le CSS pour définir la balise comme un média à imprimer uniquement.

Il pourrait s'agir d'un exemple d'en-tête :

<span class="printspan">UNCLASSIFIED</span>

Et dans votre CSS, faites quelque chose comme ceci :

<style type="text/css" media="screen">
    .printspan
    {
        display: none;
    }
</style>
<style type="text/css" media="print">
    .printspan
    {
        display: inline;
        font-family: Arial, sans-serif;
        font-size: 16 pt;
        color: red;
    }
</style>

Enfin, pour inclure l'en-tête/le pied de page sur chaque page, vous pouvez utiliser les inclusions côté serveur ou, si vous avez des pages générées avec PHP ou ASP, vous pouvez simplement les coder dans un fichier commun.

Edit :

Cette réponse est destinée à fournir un moyen d'afficher un élément sur la version physique imprimée d'un document sans l'afficher autrement. Cependant, comme le suggèrent les commentaires, elle ne résout pas le problème d'avoir un pied de page sur plusieurs pages imprimées lorsque le contenu déborde.

Je le laisse ici au cas où il serait néanmoins utile.

Répondu el 1 de Septembre, 2009 par JYelton (14014 Points )

5 votes

+1 pour l'utilisation de display plutôt que visibility - visibility : hidden laisse un espace réservé, alors que display : none réduit l'espace blanc, économise du papier et permet à la planète Terre de survivre plus longtemps.

Commenté el 1 de Septembre, 2009 par Steve Fenton

3 votes

-1 : bien qu'il s'agisse d'un bon exemple de feuille de style pour l'impression, il ne traite pas la question du débordement du contenu d'une page . En l'état, cela n'afficherait le pied de page que sur la dernière page.

Commenté el 24 de Septembre, 2010 par Chris Lively

En-tête et pied de page d'impression HTML

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

En-tête et pied de page d'impression HTML

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: