J'utilise window.print() pour imprimer une page, mais l'en-tête et le pied de page contiennent le titre de la page, le chemin du fichier, le numéro de page et la date. Comment les supprimer ?
J'ai aussi essayé la feuille de style d'impression.
#header, #nav, .noprint
{
display: none;
}Aidez-nous. Merci.
Dans Chrome, il est possible de masquer cet entête/pied de page automatique en utilisant
@page { margin: 0; }Comme le contenu s'étendra jusqu'aux limites de la page, l'en-tête et le pied de page d'impression seront absents. Dans ce cas, vous devez bien sûr définir des marges et des intercalaires dans votre élément body afin que le contenu ne s'étende pas jusqu'au bord de la page. Étant donné que les imprimantes courantes ne peuvent pas imprimer sans marges et que ce n'est probablement pas ce que vous voulez, vous devez utiliser quelque chose comme ceci :
@media print {
@page { margin: 0; }
body { margin: 1.6cm; }
}Comme Martin a souligné dans un commentaire, si la page comporte un long élément qui défile au-delà d'une page (comme un grand tableau), la marge est ignorée et la version imprimée aura un aspect bizarre.
Au moment original de cette réponse (mai 2013), cela ne fonctionnait que sur Chrome, pas sûr maintenant, jamais eu besoin de réessayer. Si vous avez besoin d'une prise en charge pour un navigateur qui ne peut pas hable, vous pouvez créer un PDF à la volée et l'imprimer (vous pouvez créer un PDF auto-imprimable en y intégrant JavaScript), mais c'est un gros problème.
Cela ne fonctionnera plus après la sortie de Firefox 48 (août 2016) : bugzilla.mozilla.org/show_bug.cgi?id=1260480
Aujourd'hui, mon collègue est tombé sur le même problème.
La solution "margin:0" fonctionne cependant pour les navigateurs basés sur chrome, Internet Explorer continuer à imprimer le pied de page même si les marges de @page sont fixées à zéro.
La solution (plutôt un hack) a été de mettre une marge négative sur la @page.
@page {margin:0 -6cm}
html {margin:0 6cm}Veuillez noter que la marge négative ne fonctionne pas pour l'axe Y, mais uniquement pour l'axe X.
J'espère que cela vous aidera.
La norme CSS permet un formatage avancé. Il existe une directive @page en CSS qui permet un certain formatage qui ne s'applique qu'aux supports paginés (comme le papier). Voir http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Print Test</title>
<style type="text/css" media="print">
@page
{
size: auto; /* auto is the current printer page size */
margin: 0mm; /* this affects the margin in the printer settings */
}
body
{
background-color:#FFFFFF;
border: solid 1px black ;
margin: 0px; /* the margin on the content before printing */
}
</style>
</head>
<body>
<div>Top line</div>
<div>Line 2</div>
</body>
</html>et pour firefox utilisez-le
Dans Firefox, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (voir la source de la page : : balise HTML).
Dans votre code, remplacez <html> avec <html moznomarginboxes mozdisallowselectionprint>.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
7 votes
Ces éléments sont spécifiques aux paramètres du navigateur de l'utilisateur. Je ne pense pas que vous puissiez les supprimer par le biais de CSS ou de JavaScript.
0 votes
Je pense que cette question nécessite une clarification : Essayez-vous de supprimer les éléments d'en-tête et de pied de page du HTML qui s'affiche à l'écran ou voulez-vous éliminer les en-têtes et les pieds de page qui sont ajoutés par la fonction d'impression ?