Comment puis-je obtenir une impression cohérente des en-têtes et pieds de page personnalisés sur chaque page d'un rapport Web ?-tutoriel CSS-php.cn

Comment puis-je obtenir une impression cohérente des en-têtes et pieds de page personnalisés sur chaque page d'un rapport Web ?

Barbara Streisand

Libérer： 2024-10-25 11:42:02

original

773 Les gens l'ont consulté

How can I achieve consistent printing of custom headers and footers on every page of a web report?

Impression des en-têtes et des pieds de page de pages Web sur chaque page

La possibilité d'imprimer des en-têtes et des pieds de page personnalisés sur chaque page d'un rapport Web imprimé a été autrefois considéré comme inaccessible. Cependant, les progrès récents dans les capacités des navigateurs ont fait de cela une réalité, en particulier dans le cas de Mozilla Firefox et Internet Explorer.

Utiliser des tableaux pour réaliser un regroupement de pages

En tant que approche efficace, il est possible d'utiliser des tableaux en combinaison avec le style CSS pour obtenir le résultat souhaité. En implémentant les styles CSS suivants :

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

Copier après la connexion

vous pouvez désigner des éléments de tableau spécifiques comme en-têtes ou pieds de page. Cela permet de les répéter sur chaque page imprimée.

Exemple de structure HTML

Pour mettre en œuvre cette technique, structurez le HTML comme suit :

<code class="html"><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></code>

Copier après la connexion

Gestion des médias imprimés

Pour garantir que ces éléments ne sont affichés que sous forme imprimée, utilisez la règle @media :

<code class="css">@media print {
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
}

@media screen {
    thead { display: none; }
    tfoot { display: none; }
}</code>

Copier après la connexion

Cela supprimera l'affichage de l'en-tête et du pied de page. à l'écran tout en conservant leur présence dans les documents imprimés.

Considérations relatives au support et au navigateur

Depuis 2015, cette technique reste efficace dans Mozilla Firefox et Internet Explorer. Les navigateurs basés sur Webkit (par exemple Chrome, Safari) ont déjà rencontré des problèmes dans ce domaine. Cependant, des mises à jour récentes ont atténué ces problèmes dans Chrome. Consultez les rapports de bugs fournis ci-dessous pour plus d'informations :

[WebKit Bug 17205](https://bugs.webkit.org/show_bug.cgi?id=17205)
[ Chromium Numéro 24826](https://code.google.com/p/chromium/issues/detail?id=24826)
[Chromium Numéro 99124](https://code.google.com/p /chromium/issues/detail?id=99124)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment puis-je obtenir une impression cohérente des en-têtes et pieds de page personnalisés sur chaque page d'un rapport Web ?