web-dev-qa-db-fra.com

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

J'utilise window.print () pour imprimer une 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 essayé la feuille de style d'impression aussi.

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

S'il vous plaît aider. Merci.

cssprinting
82
Viralk

Dans Chrome, il est possible de masquer cet en-tête/pied de page automatique à l'aide de

@page { margin: 0; }

Puisque le contenu s'étendra jusqu'aux limites de la page, l'en-tête/le pied de page d'impression sera absent. Dans ce cas, vous devez bien sûr définir des marges/marges 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 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 de l'original de cette réponse (mai 2013), cela ne fonctionnait que sur Chrome, pas tout à fait sûr maintenant, jamais eu besoin d'essayer à nouveau. Si vous avez besoin de support 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-imprimant intégrant JavaScript), mais c’est un énorme tracas.

112
diego nunes

Firefox:

  • Ajouter l'attribut moznomarginboxes dans <html>

Exemple : 

<html moznomarginboxes mozdisallowselectionprint>
20
l2aelba

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

17
Rudias

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

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

La solution (plus d'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, mais uniquement pour X 

J'espère que ça aide.

9
Nick Panov

Le standard CSS permet une mise en forme avancée. 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>

et pour firefox l'utiliser

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

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

8
hossein ghaem
@media print {
    .footer,
    #non-printable {
        display: none !important;
    }
    #printable {
        display: block;
    }
}
1
Sheak Abdulla

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

@print{
    @page :footer {color: #fff }
    @page :header {color: #fff}
}
0
Yasitha

Si vous faites défiler jusqu'à ce point, j'ai trouvé une solution pour Firefox. Il imprimera le contenu d'une division 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, où que vous souhaitiez écrire le code d'impression, procédez comme suit (j'ai utilisé JQuery. Vous pouvez utiliser du javascript simple):

<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>
0
Josiah

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 voir la barre de menu
  2. Cliquez sur Fichier, puis sur Mise en page
  3. Sélectionnez l'onglet Marges & En-tête/Pieds
  4. Changer l'URL pour un blanc -> 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 de chaque page ):

  1. Appuyez sur Alt ou F10 pour voir la barre de menu
  2. Cliquez sur Fichier, puis sur Mise en page
  3. dans la section En-têtes et pieds de page, remplacez URL par vide.
0
alireza azami

1. Pour Chrome & 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 disait l2aelba ,

Ajoutez l'attribut moznomarginboxes dans Exemple:

<html moznomarginboxes mozdisallowselectionprint>
0
Nikhilus