Maison >interface Web >tutoriel CSS >Comment désactiver les options d'impression du navigateur (en-tête, pied de page, marges) à partir d'une page en utilisant CSS ?
Comment désactiver les options d'impression du navigateur (en-tête, pied de page, marges) à partir d'une page en utilisant CSS ?
- WBOYavant
- 2023-08-30 14:01:021117parcourir
Nous pouvons contrôler l'en-tête, le pied de page et les marges de la page d'aperçu avant impression via CSS, et même obtenir la disposition et la direction souhaitées du support de pagination. Nous utiliserons la directive @page pour arriver à nos résultats.
Lors de la prévisualisation de la page imprimée dans le navigateur, nous pouvons voir des informations supplémentaires sur la page, telles que le titre de la page, la date et l'heure de l'aperçu de la page et le numéro de la page dans l'aperçu, qui sont affichées dans l'en-tête et le pied de page de la page. Nous pouvons également voir des marges supplémentaires appliquées au support d’aperçu de la page.
Grammaire
@media print {
@page {
/* Desired CSS */
}
}
La traduction chinoise de Explication
est :Explication
Dans cette approche, nous utiliserons la règle (ou directive) @page at à l'intérieur de la règle d'impression @media, qui est fournie par CSS et nous permet d'appliquer une mise en forme sur des supports paginés, qui incluent les pages visibles à l'écran, les papiers, etc.
Avec la directive @page, nous pouvons contrôler la mise en page, la conception, les marges, l'orientation de la page imprimée et même la conception d'une page spécifique. Cette directive est largement utilisée pour concevoir des médias discrets (paginés).
Les médias paginés sont différents des médias continus habituels (comme les sites Web) car dans les médias paginés, si le contenu déborde, il est divisé en pages distinctes. On peut toujours contrôler la mise en page de la page grâce à la pseudo-classe de la directive @page.
La traduction chinoise deExemple 1
est :Exemple 1
Dans cet exemple, nous supprimerons l'en-tête, le pied de page et les marges supplémentaires visibles dans les médias paginés en définissant les marges sur "0" à l'intérieur de la directive @paged.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>How to disable browser print options (headers, footers, margins) from the page with CSS?</title>
</head>
<style>
@page {
margin: 0;
}
</style>
<body>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat
magni hic distinctio ea est, recusandae dolores in eum cum velit adipisci
aperiam non ullam culpa quae maiores dignissimos, tempora, quod exercitationem
reiciendis molestiae temporibus veniam pariatur quo? Ut similique doloremque
repudiandae. Maiores iure quam ex. Cumque, laudantium debitis dolorem,
rerum consequatur tempore dignissimos nostrum officiis nam minima omnis
</p>
</body>
</html>
Appuyez sur commande + p (sous Mac) ou ctrl + p (sous Windows, Linux) pour voir l'écran d'aperçu avant impression
Exemple 2
Dans cet exemple, nous supprimerons l'option d'impression du navigateur du support paginé mais ajouterons des marges à l'élément body dans l'écran du support paginé.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>How to disable browser print options (headers, footers, margins) from the page with CSS?</title>
</head>
<style>
@media print {
@page {
margin: 0;
}
body {
margin: 2rem;
}
}
</style>
<body>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat
magni hic distinctio ea est, recusandae dolores in eum cum velit adipisci
aperiam non ullam culpa quae maiores dignissimos, tempora, quod exercitationem
reiciendis molestiae temporibus veniam pariatur quo? Ut similique doloremque
repudiandae. Maiores iure quam ex. Cumque, laudantium debitis dolorem,
rerum consequatur tempore dignissimos nostrum officiis nam minima omnis
</p>
</body>
</html>
Appuyez sur commande + p (sous Mac) ou ctrl + p (sous Windows, Linux) pour voir l'écran d'aperçu avant impression
Conclusion
Dans cet article, nous avons découvert la directive CSS @paged et comment vous pouvez l'utiliser pour supprimer/désactiver les options d'impression du navigateur à partir de l'aperçu avant impression en utilisant uniquement CSS.
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!