Comment puis-je contrôler les paramètres d'impression du navigateur (marges, en-têtes, pieds de page) à l'aide de CSS ?-tutoriel CSS-php.cn

Comment puis-je contrôler les paramètres d'impression du navigateur (marges, en-têtes, pieds de page) à l'aide de CSS ?

Linda Hamilton

Libérer： 2024-12-30 06:21:10

original

329 Les gens l'ont consulté

How Can I Control Browser Print Settings (Margins, Headers, Footers) Using CSS?

Modification des paramètres d'impression du navigateur (marges, en-têtes, pieds de page)

De nombreuses tentatives ont été faites pour aborder le sujet de la modification des paramètres d'impression du navigateur, mais la clarté définitive reste insaisissable. Cet article fournit une explication complète et un exemple de code basé sur les dernières normes CSS.

Personnalisation avec la directive @page

CSS propose la directive @page, permettant la modification du formatage spécifique à la page pour les impressions. médias. En utilisant cette directive, les développeurs peuvent spécifier les marges de l'imprimante, l'orientation de la page et d'autres paramètres.

Définition des marges de l'imprimante

Pour définir les marges de l'imprimante, utilisez la propriété margin dans la directive @page. Cette propriété prend des valeurs en millimètres et affecte les paramètres de marge dans le panneau d'options de l'imprimante.

Remarque : Le comportement du navigateur pour les propriétés @page peut varier. Par exemple, Safari ne prend pas en charge le paramètre de marge, contrairement aux autres principaux navigateurs.

Pour supprimer les en-têtes et les pieds de page à l'aide de @page, définissez les marges comme suit :

@page {
    margin: 0mm;
}

Copier après la connexion

Cette technique peut ne pas être efficace si votre contenu imprimé s'étend sur plusieurs pages puisque les marges spécifiques au navigateur sont désactivées.

Spécifique au navigateur Comportement

Différents navigateurs présentent un comportement variable lors de la gestion des directives @page. Voici une répartition :

Firefox 3.6 et versions antérieures : Les marges de @page sont ignorées.
IE 7 et versions antérieures : Les marges de @page sont ignorés.
Safari 5.1.7 : Les marges de @page ne sont pas prises en charge.
Chrome 4.1 : Les marges de @page sont ignorées.
IE 8 : Les marges de la @page sont respectées, mais l'en-tête et le pied de page du navigateur ne le sont pas. masqué.
Opera 10 : Les marges de @page ne sont pas respectées, mais l'en-tête et le pied de page du navigateur sont masqués si l'arrière-plan n'est pas transparent.
Chrome 21 et ci-dessus : Les marges de la @page sont respectées, et l'en-tête et le pied de page du navigateur sont masqués si les marges chevauchent les contenu.

Exemple de code

Le code HTML et CSS suivant montre comment personnaliser les paramètres d'impression avec la directive @page.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Print Test</title>
    <style type="text/css" media="print">
    @page 
    {
        size:  auto;
        margin: 0mm;
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm;
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

Copier après la connexion

Remarque : Ce code masque l'en-tête et le pied de page du navigateur dans Chrome mais pas dans les autres navigateurs.

Limitations et Considérations

La modification dynamique des paramètres d'impression du navigateur peut ne pas être prise en charge de manière cohérente dans tous les navigateurs. Certains navigateurs peuvent remplacer les paramètres personnalisés ou les résultats peuvent varier en fonction de l'imprimante spécifique utilisée.

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!