Comment puis-je remplacer les paramètres d'impression par défaut du navigateur à l'aide de CSS et JavaScript ?

Désactivation des paramètres d'impression par défaut du navigateur pour les impressions à partir de pages Web

De nombreux développeurs Web ont recherché des solutions pour modifier les paramètres d'impression par défaut du navigateur, en particulier pour en-têtes, pieds de page et marges. Cet article vise à fournir une compréhension complète des options disponibles via CSS et JavaScript, dans différents navigateurs.

Solution CSS

La directive @page en CSS offre un formatage avancé options pour les supports paginés tels que le papier. Elle vous permet de spécifier les marges de l'imprimante spécifiquement pour la page, indépendamment des marges des éléments.

@page {
    margin: 0mm;
}

Cependant, la prise en charge de cette directive varie selon les navigateurs. Alors que les navigateurs comme Safari, Internet Explorer, Opera et Chrome prennent en charge la définition des marges des pages d'imprimante, Firefox ne le fait toujours pas.

Personnalisation des sauts de page et des marges de contenu

En plus de marges d'impression, vous pouvez contrôler les sauts de page et les marges de contenu à l'aide de CSS pour supprimer les en-têtes et les pieds de page.

body {
    margin: 10mm 15mm 10mm 15mm;
}

Lors de l'impression, le navigateur supprimera le contenu dans les zones spécifiées par les marges du corps, masquant ainsi l'en-tête et le pied de page de la page. Toutefois, notez que cela ne fonctionne que si le contenu imprimé tient sur une seule page.

Comportement du navigateur

Le comportement de ces paramètres diffère selon les navigateurs.

• Internet Explorer : définit la marge d'impression correcte mais affiche l'en-tête/pied de page du navigateur avec un arrière-plan opaque, masquant le contenu.
• Firefox : positionne correctement le contenu mais affiche à la fois le texte d'en-tête/pied de page du navigateur et le texte du contenu, ce qui entraîne un affichage mixte.
• Opera : masque l'en-tête mais la marge n'est pas définie correctement, entraînant des problèmes potentiels de visibilité de l'en-tête.
• Chrome : masque l'en-tête/le pied de page du navigateur si la marge de la page entre en conflit avec sa position, offrant ainsi la meilleure implémentation pour masquer ces éléments.

Conclusion

Bien que CSS fournisse un mécanisme pour gérer les paramètres d'impression, la prise en charge et le comportement du navigateur varient. Chrome présente le comportement le plus souhaitable pour masquer les en-têtes et les pieds de page. Toutefois, si la cohérence entre les navigateurs est cruciale, des solutions alternatives devront peut-être être envisagées.

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!