Rimuovi intestazione e piè di pagina da window.print ()

109

Sto usando window.print () per stampare la pagina, ma l'intestazione e il piè di pagina contengono il titolo della pagina, il percorso del file, il numero di pagina e la data. Come rimuoverli?

Ho provato anche a stampare il foglio di stile.

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

Per favore aiuto. Grazie.

css printing

— Viralk
fonte

7

Questi elementi sono specifici delle impostazioni del browser dell'utente. Non credo che sarai in grado di rimuoverli tramite CSS o JavaScript.

— Michael Berkowski

Penso che questa domanda abbia bisogno di un chiarimento: stai cercando di rimuovere gli elementi di intestazione e piè di pagina dell'HTML che viene visualizzato sullo schermo o vuoi eliminare le intestazioni e i piè di pagina che vengono aggiunti dalla funzione di stampa?

— AlanObject

149

In Chrome è possibile nascondere questa intestazione / piè di pagina automatica utilizzando

@page { margin: 0; }

Poiché il contenuto si estenderà ai limiti della pagina, l'intestazione / piè di pagina di stampa della pagina sarà assente. Ovviamente in questo caso dovresti impostare alcuni margini / imbottiture nell'elemento del tuo corpo in modo che il contenuto non si estenda fino al bordo della pagina. Dal momento che le stampanti comuni non possono ottenere la stampa senza margini e probabilmente non è quello che vuoi, dovresti usare qualcosa del genere:

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

Come ha sottolineato Martin in un commento, se la pagina ha un elemento lungo che scorre oltre una pagina (come una grande tabella), il margine viene ignorato e la versione stampata apparirà strana.

All'epoca originale di questa risposta (maggio 2013), funzionava solo su Chrome, non ne sono sicuro ora, non è mai stato necessario riprovare. Se hai bisogno del supporto per un browser che non è in grado di gestire, puoi creare un PDF al volo e stamparlo (puoi creare un PDF auto-stampante incorporando JavaScript su di esso), ma è una seccatura enorme.

— diego nunes
fonte

2

Per qualche motivo, body { margin: 1.6cm; }ignoravo il margine giusto per me (forse perché stavo usando text-align:right), quindi invece ho creato un <div class="container">per il mio contenuto e l'ho usato .container { margin: 1.6cm; }invece.

— rybo111

8

Lo sto provando con Chrome 33. Funziona benissimo, ma attenzione, perché body { margin: 1.6cm; }- poiché è un margine per l'intero documento - non rispetterà i margini verticali per i documenti multipagina, tranne il primo e l'ultimo. Purtroppo, non riesco a pensare a una soluzione alternativa.

— pau.moreno

Ciao @Diego, sono soddisfatto del tuo suggerimento e il mio piè di pagina dell'intestazione è stato rimosso ma la mia pagina di stampa è stata aumentata. "body {margin: 1.6cm;}" cambia appena 1,6 cm in 1,0 cm e funziona .. :) Buon divertimento

— Vishal Kiri

3

C'è una risposta più ampia qui: stackoverflow.com/questions/1960939/...

— jedison

La rimozione del margine della pagina e l'aggiunta del margine del corpo stava generando una pagina vuota per me. Ho cambiato il margine del corpo in imbottitura e ha funzionato.

— André Guimarães Sakata

21

Sono sicuro che l'aggiunta di questo codice sul tuo file css risolverà il problema

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

Puoi visitare questo per saperne di più

— Rudias
fonte

3

No. Non funziona. È l'impostazione del margine che è tutto. L'URL e la data sono ancora visualizzate nell'intestazione e nel piè di pagina

— Studente

Funziona per Chrome e Firefox, ma non per IE 11.

— Sammi

21

Firefox:

Aggiungi moznomarginboxesattributo in<html>

Esempio :

<html moznomarginboxes mozdisallowselectionprint>

— l2aelba
fonte

6

Questo non funzionerà più dopo il rilascio di Firefox 48 (agosto 2016): bugzilla.mozilla.org/show_bug.cgi?id=1260480

— Aljullu

non funziona per me, FF 61, ma @page {margin: 0; } sembra funzionare anche in FF.

— Kiko

11

Oggi il mio collega si è imbattuto nella stessa questione.

Poiché la soluzione "margin: 0" funziona per i browser basati su Chrome , Internet Explorer continua a stampare il piè di pagina anche se i margini @page sono impostati su zero.

La soluzione (più che altro un trucco) era mettere un margine negativo sulla pagina @.

@page {margin:0 -6cm}
html {margin:0 6cm}

Tieni presente che il margine negativo non funzionerà per l'asse Y, solo per X

Spero che sia d'aiuto.

— Nick Panov
fonte

8

Lo standard CSS consente una formattazione avanzata. C'è una direttiva @page in CSS che abilita una certa formattazione che si applica solo ai media a pagine (come la carta). Vedi 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>

Espandi lo snippet

e per Firefox usalo

In Firefox, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (visualizza sorgente pagina :: tag HTML).

Nel tuo codice, sostituisci <html>con<html moznomarginboxes mozdisallowselectionprint>.

— Hossein Ghaem
fonte

4

@media print {
    .footer,
    #non-printable {
        display: none !important;
    }
    #printable {
        display: block;
    }
}

— Sheak Abdulla
fonte

Questo sembra essere il modo corretto per farlo. Anche nel mio caso in un contesto iframe, funziona alla grande.

— TwystO

2

Questa sarà la soluzione più semplice. Ho provato la maggior parte delle soluzioni in Internet, ma solo questo mi ha aiutato.

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

— Yasitha
fonte

11

Questo non fa niente.

— notti

1

@page { margin: 0; }funziona bene in Chrome e Firefox. Non ho trovato un modo per correggere IE tramite css. Ma puoi andare in Imposta pagina in IE sulla tua macchina e impostare i margini su 0. Premi alt e poi il menu file nell'angolo in alto a sinistra e troverai Imposta pagina. Funziona solo per una macchina alla volta ...

— Sammi
fonte

0

1. Per Chrome e 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>

Per FireFox come ha detto l2aelba ,

Aggiungi l'attributo moznomarginboxes nell'esempio:

<html moznomarginboxes mozdisallowselectionprint>

— Nikhilus
fonte

Nel codice sopra i <div id = "header" style = "background-color: White;"> </div> <div id = "footer" style = "background-color: White;"> </div> sono facoltativi .

— Nikhilus

0

Stavo cercando di rimuovere l'intestazione e il piè di pagina di una pagina html che ho stampato manualmente.

Nessuna soluzione in questa pagina ha funzionato per me, ma semplicemente definendo il mio piè di pagina come spiegato qui, Firefox non aggiungerebbe la propria intestazione e piè di pagina.

Questo non funziona su Chrome purtroppo.

In CSS:

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

Aggiungi questo al tuo HTML:

<div class="divFooter">
<p>UNCLASSIFIED</p>
</div>
``

— lwinkler
fonte

-1

Se ti capita di scorrere fino a questo punto, ho trovato una soluzione per Firefox. Stamperà i contenuti da un div specifico senza i piè di pagina e le intestazioni. Puoi personalizzare come desideri.

Innanzitutto, scarica e installa questo addon: JSPrintSetup .

In secondo luogo, scrivi questa funzione:

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

In terzo luogo, nel tuo codice, ovunque tu voglia scrivere il codice di stampa, fai questo (ho usato JQuery. Puoi usare javascript semplice):

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

Ovviamente, è necessario il collegamento per fare clic:

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

E il tuo div da stampare:

<div id="yourDivToPrint">....</div>

— Josiah
fonte

-3

non devi scrivere alcun codice. appena prima di chiamare window.print () per la prima volta, modifica le impostazioni di stampa del tuo browser. ad esempio in firefox:

Premere Alt o F10 per visualizzare la barra dei menu
Fare clic su File, quindi Imposta pagina
Seleziona la scheda Margini e intestazione / piè di pagina
Cambia URL per vuoto -> immagine

e un altro esempio per IE (sto usando IE 11 per le versioni precedenti, puoi vedere questo Impedisci a Firefox o Internet Explorer di stampare l'URL su ogni pagina ):

Premere Alt o F10 per visualizzare la barra dei menu
Fare clic su File, quindi Imposta pagina
nella sezione Intestazioni e piè di pagina Cambia URL per vuoto.

— alireza azami
fonte

Sebbene questo collegamento possa rispondere alla domanda, è meglio includere le parti essenziali della risposta qui e fornire il collegamento come riferimento. Le risposte di solo collegamento possono diventare non valide se la pagina collegata cambia. - Dalla recensione

— SurvivalMachine

grazie per il suggerimento SurvivalMachine. Ho modificato la mia risposta alcuni minuti fa :)

— alireza azami

Hmmm ... non mi piace dover correre intorno a tutti i miei utenti e aggiornare i loro browser (per quanti ne utilizzino) per tenere conto di questa app, soprattutto se vivono dall'altra parte del pianeta. Inoltre, cosa succede se hanno bisogno delle impostazioni per un'altra app? Questa non è una risposta.

— Paul

Questo approccio manca della funzionalità cross-browser che una funzionalità inserita nella pagina / app fornirebbe.

— killcreen