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

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