Maison > interface Web > js tutoriel > Puis-je personnaliser les options d'impression de ma page Web pour désactiver les en-têtes, les pieds de page et les marges ?

Puis-je personnaliser les options d'impression de ma page Web pour désactiver les en-têtes, les pieds de page et les marges ?

Mary-Kate Olsen
Libérer: 2024-11-10 12:20:03
original
165 Les gens l'ont consulté

Can I Customize Print Options in My Web Page to Disable Headers, Footers, and Margins?

Personnalisation des options d'impression du navigateur : désactivation des en-têtes, des pieds de page et des marges

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 ?

Directive @page de CSS

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.

Incompatibilité et considérations du navigateur

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.

La meilleure solution pour les marges personnalisées

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.

Conclusion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal