Supprimer l'en-tête et le pied de page de window.print ()

109

J'utilise window.print () pour imprimer la page, mais j'ai un en-tête et un pied de page contenant le titre de la page, le chemin du fichier, le numéro de page et la date. Comment les supprimer?

J'ai également essayé une feuille de style d'impression.

#header, #nav, .noprint
{
display: none;
}

Veuillez aider. Merci.

css printing Viralk
la source
7
Ces éléments sont spécifiques aux paramètres du navigateur de l'utilisateur. Je ne pense pas que vous pourrez les supprimer via CSS ou JavaScript.
Michael Berkowski
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 code HTML qui s'affiche à l'écran ou souhaitez-vous supprimer les en-têtes et pieds de page ajoutés par la fonction d'impression?
AlanObject le

Réponses:

149

Dans Chrome, il est possible de masquer cet en-tête / pied de page automatique en utilisant

@page { margin: 0; }

Étant donné que le contenu s'étendra aux limites de la page, l'en-tête / pied de page d'impression de la page sera absent. Vous devriez, bien sûr, dans ce cas, définir des marges / rembourrages 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 tout simplement pas obtenir une impression sans marges et que ce n'est probablement pas ce que vous voulez, vous devriez utiliser quelque chose comme ceci:

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

Comme Martin l'a souligné dans un commentaire, si la page a 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 l'air bizarre.

À l'époque d'origine de cette réponse (mai 2013), cela ne fonctionnait que sur Chrome, je n'en suis pas sûr maintenant, je n'ai jamais eu besoin de réessayer. Si vous avez besoin de support pour un navigateur qui ne peut pas gérer, vous pouvez créer un PDF à la volée et l'imprimer (vous pouvez créer un PDF auto-imprimable incorporant du JavaScript dessus), mais c'est un énorme problème.

diego nunes
la source
2
Pour une raison quelconque, body { margin: 1.6cm; }j'ignorais la bonne marge pour moi (peut-être parce que j'utilisais text-align:right), alors j'ai plutôt créé un <div class="container">pour mon contenu et utilisé à la .container { margin: 1.6cm; }place.
rybo111
8
J'essaye ceci avec Chrome 33. Cela fonctionne très bien, mais soyez prudent, car body { margin: 1.6cm; }- comme il s'agit d'une marge pour l'ensemble du document - ne respectera pas les marges verticales des documents de plusieurs pages, sauf le tout premier et le dernier. Malheureusement, je ne peux pas penser à une solution de contournement.
pau.moreno
Hey @Diego, je suis satisfait de votre suggestion et mon pied de page d'en-tête a été supprimé mais ma page d'impression a augmenté. "body {margin: 1.6cm;}" il suffit de changer de 1.6cm en 1.0cm et ça marche .. :) Happy codding
Vishal Kiri
3
Il y a une réponse plus complète ici: stackoverflow.com/questions/1960939/…
jedison
La suppression de la marge de la page et l'ajout de la marge du corps généraient une page vide pour moi. J'ai changé la marge du corps en rembourrage et cela a fonctionné.
André Guimarães Sakata
21

Je suis sûr que l'ajout de ce code sur votre fichier css résoudra le problème

<style type="text/css" media="print">
    @page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }
</style>

Vous pouvez visiter ce site pour en savoir plus

Rudias
la source
4
Non, ça ne marche pas. C'est définir la marge, c'est tout. Il affiche toujours l'url et la date et l'heure sur l'en-tête et le pied de page
Apprenant
Fonctionne pour Chrome et Firefox, mais pas pour IE 11.
Sammi
21

Firefox:

  • Ajouter un moznomarginboxesattribut dans<html>

Exemple :

<html moznomarginboxes mozdisallowselectionprint>
l2aelba
la source
6
Cela ne fonctionnera plus après la sortie de Firefox 48 (août 2016): bugzilla.mozilla.org/show_bug.cgi?id=1260480
Aljullu
ça ne marche pas pour moi, FF 61, mais la @page {margin: 0; } La solution semble également fonctionner dans FF.
Kiko le
11

Aujourd'hui, mon collègue est tombé sur le même problème.

Cependant, comme la solution «margin: 0» fonctionne pour les navigateurs à base de chrome, Internet Explorer continue à imprimer le pied de page même si les marges @page sont définies sur zéro.

La solution (plutôt un hack) était 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 fonctionnera pas pour l'axe Y, uniquement pour X

J'espère que ça aide.

Nick Panov
la source
8

La norme CSS permet un formatage avancé. Il existe une directive @page dans CSS qui permet une mise en forme qui s'applique uniquement 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>
Développer l'extrait

et pour Firefox, utilisez-le

Dans Firefox, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (voir la page source :: tag HTML).

Dans votre code, remplacez <html>par<html moznomarginboxes mozdisallowselectionprint>.

Hossein Ghaem
la source
4 
@media print {
    .footer,
    #non-printable {
        display: none !important;
    }
    #printable {
        display: block;
    }
}
Sheak Abdulla
la source
Cela semble être la bonne façon de procéder. Même dans mon cas dans un contexte iframe, cela fonctionne très bien.
TwystO
2

Ce sera la solution la plus simple. J'ai essayé la plupart des solutions sur Internet, mais seul cela m'a aidé.

@print{
    @page :footer {color: #fff }
    @page :header {color: #fff}
}
Yasitha
la source
11
Cela ne fait rien.
nuits du
1

@page { margin: 0; }fonctionne très bien dans Chrome et Firefox. Je n'ai pas trouvé de moyen de réparer IE via CSS. Mais vous pouvez accéder à la mise en page dans IE sur votre propre ordinateur et définir les marges à 0. Appuyez sur alt, puis sur le menu fichier dans le coin supérieur gauche et vous trouverez la mise en page. Cela ne fonctionne que pour une seule machine à la fois ...

Sammi
la source
0

1. Pour Chrome et IE

<script language="javascript">
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.getElementById('header').style.display = 'none';
document.getElementById('footer').style.display = 'none';
document.body.innerHTML = printContents;

window.print();


document.body.innerHTML = originalContents;
}

</script>
<div id="div_print">
<div id="header" style="background-color:White;"></div>
<div id="footer" style="background-color:White;"></div>
</div>
  1. Pour FireFox comme dit l2aelba ,

Ajoutez l'attribut moznomarginboxes dans l'exemple:

<html moznomarginboxes mozdisallowselectionprint>
Nikhilus
la source
Dans le code ci-dessus, les <div id = "header" style = "background-color: White;"> </div> <div id = "footer" style = "background-color: White;"> </div> sont facultatifs .
Nikhilus
0

J'essayais de supprimer l'en-tête et le pied de page d'une page html que j'ai imprimée manuellement.

Aucune solution sur cette page n'a fonctionné pour moi mais simplement en définissant mon propre pied de page comme expliqué ici Firefox n'ajouterait pas son propre en-tête et pied de page.

Cela ne fonctionne malheureusement pas sur Chrome.

En CSS:

@media screen {
  div.divFooter {
    display: none;
  }
}
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
}

Ajoutez ceci à votre HTML:

<div class="divFooter">
<p>UNCLASSIFIED</p>
</div>
``
lwinkler
la source
-1

Si vous faites défiler jusqu'à ce point, j'ai trouvé une solution pour Firefox. Il imprimera le contenu d'un div spécifique sans les pieds de page et les en-têtes. Vous pouvez personnaliser comme vous le souhaitez.

Tout d'abord, téléchargez et installez cet addon: JSPrintSetup .

Deuxièmement, écrivez cette fonction: 

<script>
function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');
    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write(elem);
    mywindow.document.write('</body></html>');
    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

   //jsPrintSetup.setPrinter('PDFCreator'); //set the printer if you wish
   jsPrintSetup.setSilentPrint(1);

   //sent empty page header
   jsPrintSetup.setOption('headerStrLeft', '');
   jsPrintSetup.setOption('headerStrCenter', '');
   jsPrintSetup.setOption('headerStrRight', '');

   // set empty page footer
   jsPrintSetup.setOption('footerStrLeft', '');
   jsPrintSetup.setOption('footerStrCenter', '');
   jsPrintSetup.setOption('footerStrRight', '');

   // print my window silently. 
   jsPrintSetup.printWindow(mywindow);
   jsPrintSetup.setSilentPrint(1); //change to 0 if you want print dialog

    mywindow.close();

    return true;
}
</script>

Troisièmement, dans votre code, là où vous voulez écrire le code d'impression, procédez comme suit (j'ai utilisé JQuery. Vous pouvez utiliser du javascript brut):

<script>
$("#print").click(function () {
    var contents = $("#yourDivToPrint").html();
    PrintElem(contents);
})
</script>

De toute évidence, vous avez besoin du lien pour cliquer:

<a href="#" id="print">Print my Div</a>

Et votre div à imprimer:

<div id="yourDivToPrint">....</div>
Josiah
la source
-3

vous n'avez pas à écrire de code. juste avant d'appeler window.print () pour la première fois, modifiez les paramètres d'impression de votre navigateur. par exemple dans firefox:

  1. Appuyez sur Alt ou F10 pour afficher la barre de menus
  2. Cliquez sur Fichier, puis sur Mise en page
  3. Sélectionnez l'onglet Marges & En-tête / Pieds de page
  4. Changer l'URL pour vide -> image

et un autre exemple pour IE (j'utilise IE 11 pour les versions précédentes, vous pouvez voir ceci Empêcher Firefox ou Internet Explorer d'imprimer l'URL sur chaque page ):

  1. Appuyez sur Alt ou F10 pour afficher la barre de menus
  2. Cliquez sur Fichier, puis sur Mise en page
  3. dans la section En-têtes et pieds de page Remplacez l'URL par une URL vide.
alireza azami
la source
Bien que ce lien puisse répondre à la question, il est préférable d'inclure les parties essentielles de la réponse ici et de fournir le lien pour référence. Les réponses aux liens uniquement peuvent devenir invalides si la page liée change. - De l'avis
SurvivalMachine
merci pour la suggestion SurvivalMachine. J'ai modifié ma réponse il y a quelques minutes :)
alireza azami
Hmmm ... Je n'ai pas envie de devoir parcourir tous mes utilisateurs et mettre à jour leurs navigateurs (quel que soit le nombre qu'ils utilisent) pour tenir compte de cette application, surtout s'ils vivent à l'autre bout de la planète. De plus, que se passe-t-il s'ils ont besoin des paramètres d'une autre application? Ce n'est pas une réponse.
Paul
Cette approche n'a pas la fonctionnalité multi-navigateurs qu'une fonctionnalité intégrée à la page / application fournirait.
killscreen