De nombreux développeurs cherchent à améliorer l'expérience d'impression à partir de leurs pages Web. . Cependant, la frustration surgit lorsque les paramètres d'impression par défaut du navigateur, tels que les en-têtes, les pieds de page et les marges, interfèrent avec la présentation souhaitée. Existe-t-il une solution pour personnaliser ces paramètres, via CSS ou JavaScript ?
La spécification CSS fournit la directive @page, permettant aux développeurs pour définir des options de formatage spécifiquement pour les documents imprimés. Avec @page, il est possible de spécifier la taille, l'orientation et les marges de la page.
<br>@page {<br> taille : auto;<br> marge : 0 mm;<br> }<br>
En définissant la marge sur 0 mm, nous désactivons effectivement les marges par défaut du navigateur. Cependant, cette approche a des limites.
Malheureusement, le comportement du navigateur concernant @page varie considérablement. Alors que les navigateurs modernes comme Chrome et Firefox prennent en charge @page, les anciennes versions, telles que Firefox 3.6 et Internet Explorer 7, ne le font pas. De plus, Safari ne prend toujours pas en charge la définition des marges des pages d'imprimante.
Même dans les navigateurs pris en charge, le résultat peut ne pas être idéal. Par exemple, dans Internet Explorer, définir la marge sur 0 mm ne masque pas l'en-tête/pied de page, mais positionne plutôt correctement le contenu de la page avec l'en-tête/pied de page non transparent du navigateur qui le recouvre.
Dans Firefox, le @ les paramètres de marge de page sont respectés, mais l'en-tête/pied de page du navigateur et le contenu de la page sont affichés, ce qui entraîne un mélange de contrôles du navigateur et de votre contenu.
Opera se comporte de la même manière que Firefox, avec des marges non par défaut provoquant l'en-tête. pour chevaucher partiellement le contenu de la page.
Chrome est apparu comme le navigateur ayant le comportement le plus approprié pour ce scénario. En définissant la marge @page suffisamment petite pour entrer en conflit avec la position de l'en-tête/pied de page, Chrome les masque efficacement.
Il est important de noter que cette approche n'affecte que les marges de la page spécifique en cours d'impression. Cela n'affecte pas les paramètres d'impression globaux du navigateur.
La désactivation des en-têtes, des pieds de page et des marges lors de l'impression à partir d'une page Web présente des défis en raison des incohérences du navigateur. Bien que la directive @page de CSS offre certaines options de personnalisation, son efficacité varie selon les navigateurs. Chrome offre actuellement la meilleure solution pour masquer les en-têtes et les pieds de page en autorisant les marges de page à entrer en conflit avec leur position. Cependant, les mises à jour du navigateur et les développements futurs peuvent introduire des modifications à ce comportement.
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!