Comment puis-je supprimer les en-têtes et les pieds de page lors de l'utilisation de « window.print() » ?

Élimination de l'en-tête et du pied de page de 'window.print()'

Lorsque vous utilisez window.print() pour imprimer une page, vous pouvez rencontrez un problème avec les en-têtes et les pieds de page affichant les détails de la page tels que le titre, le chemin, le numéro de page et la date. Ceux-ci peuvent être gênants et interférer avec la sortie d'impression souhaitée.

Pour résoudre ce problème, une solution a été découverte qui est efficace dans le navigateur Chrome (depuis octobre 2022, elle fonctionne également dans Firefox). En utilisant la feuille de style suivante, vous pouvez supprimer l'en-tête et le pied de page automatiques générés par Chrome :

@page { margin: 0; }

Cette feuille de style définit les marges de la page à zéro, ce qui entraîne l'extension du contenu jusqu'aux bords de la page. En conséquence, l'en-tête et le pied de page, qui sont normalement affichés en dehors de la zone imprimable, sont effectivement masqués.

Pour éviter que le contenu ne dépasse les limites de la page, il est recommandé de définir des marges ou des remplissages sur l'élément de page. :

@media print {
  @page { margin: 0; }
  body { margin: 1.6cm; }
}

Dans cet exemple, une marge de 1,6 cm est appliquée en haut et en bas de la page, garantissant que le contenu reste dans la zone imprimable zone.

Il est important de noter que si le contenu est trop volumineux et nécessite plusieurs pages, cette solution risque de ne pas produire un résultat optimal. Seule la première page aura une marge supérieure et seule la dernière page aura une marge inférieure. Les pages intermédiaires n'auront pas de marges, ce qui n'est peut-être pas souhaitable.

Si vous devez prendre en charge des navigateurs qui ne gèrent pas efficacement cette feuille de style, des solutions alternatives telles que la création et l'impression d'un PDF à la volée peuvent être nécessaires, bien que ces méthodes peuvent être complexes et longues à mettre en œuvre.

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!