web-dev-qa-db-fra.com

Existe-t-il un moyen d'imprimer un en-tête / pied de page sur chaque page?

D'après mes recherches, il semble que ce que je veux faire n'est pas possible, mais au cas où quelque chose aurait changé, je voulais vérifier si quelqu'un avait trouvé un moyen de le faire.

J'ai une application Web qui génère des rapports à imprimer en fonction des sélections des utilisateurs dans la fenêtre du navigateur. J'ai un en-tête et un pied de page personnalisés qui, lorsque le rapport est imprimé à partir du navigateur, doivent être répétés sur chaque page imprimée. Ce n'est pas l'en-tête et le pied de page du navigateur dont j'ai besoin, mais plutôt ceux que je génère. De plus, je ne pense pas que ce soit un problème de CSS et de types de médias, mais je ne suis pas un expert CSS. Je n'ai aucun problème à imprimer l'en-tête et le pied de page une seule fois, mais je n'arrive pas à les faire imprimer sur chaque page. J'ai lu que peut-être que si je recréais mes pages de rapport à l'aide de tableaux, puis que j'utilisais des balises d'en-tête de tableau et CSS, cela pourrait au moins fonctionner pour obtenir l'en-tête sur chaque page. Je n'ai pas encore réussi avec ça, mais je vais réessayer si c'est la seule option. Un collègue m'a suggéré de compter les lignes dans mon php et de mettre manuellement l'en-tête et le pied de page au besoin. Je suppose que c'est une option, mais il semble juste qu'il devrait y avoir un moyen de le faire qui ne soit pas aussi "brutal"!

L'autre mise en garde est que je dois prendre en charge IE 6, donc je soupçonne que certaines des choses CSS que j'ai essayées ne sont tout simplement pas prises en charge.

Si quelqu'un sait comment le faire, ce serait formidable! S'il n'y en a pas, je devrai repenser mon approche.

Merci d'avance!

MISE À JOUR (14 décembre 2011)

J'ai fait des progrès considérables sur cette question, et en utilisant certaines des informations des réponses, j'ai produit des rapports qui étaient utilisables, mais jamais aussi Nice ou aussi professionnels que je le souhaitais. Les pieds de page auraient tendance à ne pas être assez proches du bas de la page, je devais faire beaucoup de devinettes et de calculs "fragiles" sur la taille du texte pour décider de l'insertion de sauts de page, je ne pouvais prendre en charge qu'un ensemble de formats de page, et toute modification des rapports a entraîné une cascade de modifications de code et des calculs encore plus fragiles. Il y avait toujours un scénario qui cassait une partie d'un rapport. Nous avons révisé les exigences, et générons maintenant des rapports au format PDF en utilisant TCPDF. La documentation est un peu opaque et nécessite une certaine expérimentation, mais les résultats sont de loin supérieurs et maintenant les rapports apparaissent comme ils le devraient. Je dirais à quiconque essaie de créer des rapports HTML à partir du navigateur, à moins qu'ils ne soient très simples, évitez la frustration (comme d'autres me l'ont dit ici) et allez avec des PDF ou quelque chose de similaire.

htmlcssheaderprintingfooter
39
Carvell Fenton

Cela peut être fait avec des tableaux - et je sais que je vais risquer un downvote en suggérant d'utiliser des tableaux pour la mise en page - mais nous parlons ici d'IE6 qui n'est pas connu pour son fantastique support CSS :-)

Si vous définissez un style CSS comme suit:

thead { display: table-header-group; }
tfoot { display: table-footer-group; }

Ensuite, lorsque vous créez votre code HTML, rendez votre corps comme:

<body>
<table>
   <thead><tr><td>Your header goes here</td></tr></thead>
   <tfoot><tr><td>Your footer goes here</td></tr></tfoot>
   <tbody>
     <tr><td>
     Page body in here -- as long as it needs to be
     </td></tr>
   </tbody>
</table>
</body>

Oui, ce n'est pas bon (tableaux vs CSS), ce n'est pas idéal, mais (surtout pour vous) cela fonctionne sur IE6. Je ne peux pas commenter Firefox car je ne l'ai pas testé là-bas, mais il devrait faire l'affaire. Cela gérera également des pages de tailles différentes, des tailles de police différentes, etc., donc cela devrait "fonctionner".

Si vous souhaitez que l'en-tête et le pied de page apparaissent uniquement sur les supports imprimés, utilisez les paramètres @media pour faire ce qui s'impose:

@media print {
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
}
@media screen {
    thead { display: none; }
    tfoot { display: none; }
}

Remarque
En juillet 2015, cela ne fonctionnera toujours que dans Firefox et IE. Les navigateurs Webkit (cf. Chrome, Safari) ont des bogues de longue date dans leurs trackers de problèmes à ce sujet si quelqu'un se sent assez fort pour voter sur eux:

Les commentaires sous cette question me disent que cela est maintenant résolu dans Chrome. Je ne me suis pas vérifié :-)

Les bogues d'origine contre Chrome (pour référence) sont:

34
Chris J

Cela fonctionnera dans certains navigateurs, pas tous. Je ne pense pas qu'il existe une élégante solution multi-navigateur

Incluez le pied de page/en-tête d'impression que vous souhaitez dans les divs de la page (dans cet exemple div id = 'printableFooter')

Dans le fichier css d'écran mis:

#printableFooter {display: none;}

Dans le fichier CSS d'impression:

#printableFooter {display: block; position: fixed; bottom: 0;}
6
UpTheCreek

Je suggère de diviser la page en tableau et d'ajouter la partie d'en-tête à la première ligne et la partie de pied de page à la dernière ligne. Le contenu des lignes entre la première et la dernière ligne peut être modifié dynamiquement afin que vous obteniez l'en-tête et le pied de page constants aux pages souhaitées.

----------
ROW1    HEADER
----------
ROW2   
 Insert dynamic contents here
ROW N-1
----------
ROW N Footer
5
Sachin Chourasiya

essayez de générer un document (rtf | pdf) pour l'impression

3
Horacio N. Hdez.