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

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

Ho provato anche il foglio di stile di stampa.

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

Per favore aiuto. Grazie.

In Chrome è ansible hide questa intestazione / piè di pagina automatica utilizzando

 @page { margin: 0; } 

Poiché i contenuti si estenderanno ai limiti della pagina, l’intestazione / piè di pagina di stampa della pagina sarà assente. Ovviamente, in questo caso dovresti impostare alcuni margini / paddings nell’elemento body in modo che il contenuto non si estenda fino al bordo della pagina. Dal momento che le stampanti comuni non riescono a 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 Martin ha sottolineato in un commento, se la pagina ha un lungo elemento che scorre oltre una pagina (come un grande tavolo), il margine viene ignorato e la versione stampata sembrerà strana.

Al momento originale di questa risposta (maggio 2013), ha funzionato solo su Chrome, non ne sono sicuro ora, non ha mai avuto bisogno di riprovare. Se hai bisogno di supporto per un browser che non può essere disturbato, puoi creare un PDF al volo e stamparlo (puoi creare un PDF auto-stampa che incorpora JavaScript su di esso), ma è una seccatura enorme.

Firefox:

  • Aggiungi moznomarginboxes attributo moznomarginboxes in

Esempio :

  

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

  

Puoi visitarlo per saperne di più

Lo standard CSS abilita alcune formattazioni avanzate. C’è una direttiva @page in CSS che abilita alcune formattazioni che si applicano solo ai media paginati (come la carta). Vedi http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .

   Print Test    
Top line
Line 2

Oggi il mio collega si è imbattuto nello stesso problema.

Poiché la soluzione “margin: 0” funziona per i browser basati su chromium, tuttavia, Internet Explorer continua a stampare il footer anche se i margini di @page sono impostati su zero.

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

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

Si noti che il margine negativo non funzionerà per l’asse Y, solo per X

Spero che sia d’aiuto.

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

Se ti capita di scorrere fino a questo punto, ho trovato una soluzione per Firefox. Stampa i contenuti da una specifica div senza i footer e le intestazioni. Puoi personalizzare come desideri.

In primo luogo, scarica e installa questo addon: JSPrintSetup .

In secondo luogo, scrivere questa funzione:

  

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

  

Ovviamente, è necessario il collegamento per fare clic:

 Print my Div 

E il tuo div per stampare:

 
....

1. Per Chrome e IE

  
  1. Per FireFox come ha detto l2aelba ,

Aggiungi l’attributo moznomarginboxes in Esempio:

  

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

  1. Premi Alt o F10 per vedere la barra dei menu
  2. Fare clic su File, quindi su Imposta pagina
  3. Seleziona la scheda Margini e intestazione / piè di pagina
  4. Cambia URL per vuoto -> immagine

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

  1. Premi Alt o F10 per vedere la barra dei menu
  2. Fare clic su File, quindi su Imposta pagina
  3. nella sezione Intestazioni e piè di pagina Modifica l’URL per vuoto.