182

Ho visto questa domanda posta in un paio di modi diversi su SO e su molti altri siti Web, ma la maggior parte di essi è troppo specifica o obsoleta. Spero che qualcuno possa fornire una risposta definitiva qui senza assecondare la speculazione.

Esiste un modo, con CSS o javascript, per modificare le impostazioni predefinite della stampante quando qualcuno stampa nel proprio browser? E naturalmente per "stampe dal loro browser" intendo una qualche forma di HTML, non PDF o qualche altro plug-in tipo mime.

Notare che:

Se alcuni browser offrono questo e altri no (o se sai solo come farlo per alcuni browser), accolgo con favore le soluzioni specifiche del browser.

Allo stesso modo, se si conosce un browser mainstream che ha restrizioni specifiche nei confronti di EVER, ciò è utile, ma sarebbe gradita una documentazione abbastanza aggiornata. (dire semplicemente "ciò va contro la politica di sicurezza di XYZ" non è molto convincente quando XYZ ha apportato cambiamenti significativi a tale politica negli ultimi tre anni).

Infine, quando dico "modifica le impostazioni di stampa predefinite" non intendo per sempre, solo per la mia pagina, e mi riferisco in modo specifico ai margini di stampa, alle intestazioni e ai piè di pagina.

Sono consapevole che CSS offre la possibilità di modificare l'orientamento della pagina e i margini della pagina. Una delle tante lotte è con Firefox. Se imposto i margini della pagina su 1 pollice, ADDS questo al mezzo pollice che già mette in atto.

Desidero fortemente ridurre l'utilizzo dei PDF sul sito del mio cliente, ma la violazione alla presentazione (così come la mancanza di affidabilità) sono la loro principale preoccupazione.

— Anthony
fonte

C'è un motivo specifico per cui vuoi farlo? Se dici il requisito, allora forse potrebbe esserci un'altra soluzione possibile ... Per me cambiare le impostazioni utente non sembra una bella soluzione ...

— Nivas,

1

Sono d'accordo. Non voglio cambiare le impostazioni dell'utente. Voglio sovrascrivere le impostazioni predefinite del browser. E la ragione è perché l'alternativa è usare un PDF, che sembra inutile quando tutto il resto può essere reso facile da stampare tramite CSS.

— Anthony,

Vedo che hai verificato la risposta come soluzione, ma funziona SOLO in Chrome. sei riuscito a ottenere una soluzione cross-browser corretta? o almeno in alcuni browser? perché ho lo stesso problema

— mavili

@mavili vedono stackoverflow.com/a/23778125/453605 per una soluzione cross-browser.

— Marcello Nuccio,

200

Lo standard CSS consente alcune formattazioni avanzate. C'è una @pagedirettiva nei CSS che abilita alcune formattazioni che si applicano solo ai supporti di paging (come la carta). Vedi http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .

L'aspetto negativo è che il comportamento nei diversi browser non è coerente. Safari non supporta ancora l'impostazione del margine della pagina della stampante, ma ora tutti gli altri principali browser lo supportano.

Con la @pagedirettiva, puoi specificare il margine della stampante della pagina (che non è uguale al normale margine CSS di un elemento 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 initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;  /* this affects the margin on the html before sending to printer */
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

Nota che fondamentalmente disabilitiamo i margini specifici della pagina qui per ottenere l'effetto di rimuovere l'intestazione e il piè di pagina, quindi il margine che impostiamo sul corpo non verrà utilizzato nelle interruzioni di pagina (come commentato da Konrad ) Ciò significa che funzionerà solo correttamente se il contenuto stampato è solo una pagina.

Questo non funziona in Firefox 3.6 , IE 7 , Safari 5.1.7 o Google Chrome 4.1 .

L'impostazione del margine @page ha effetto in IE 8 , Opera 10 , Google Chrome 21 e Firefox 19 .
Sebbene i margini della pagina siano impostati correttamente per il contenuto in questi browser, il comportamento non è ideale nel tentativo di risolvere il nascondiglio dell'intestazione / piè di pagina.

Ecco come si comporta in diversi browser:

In Internet Explorer , il margine è effettivamente impostato su 0 mm nelle impostazioni per questa stampa e, se si esegue l'anteprima, si otterrà 0 mm come impostazione predefinita, ma l'utente può modificarlo nell'anteprima.
Vedrai che il contenuto della pagina è effettivamente posizionato correttamente, ma l'intestazione e il piè di pagina del browser sono mostrati con uno sfondo non trasparente, nascondendo così efficacemente il contenuto della pagina in quella posizione.
Nelle versioni più recenti di Firefox , è posizionato correttamente, ma vengono visualizzati sia il testo dell'intestazione / piè di pagina che il testo del contenuto, quindi sembra un brutto mix di testo dell'intestazione del browser e contenuto della pagina.
In Opera , il contenuto della pagina nasconde l'intestazione quando si utilizza uno sfondo non trasparente nei CSS standard e la posizione dell'intestazione / piè di pagina è in conflitto con il contenuto. Abbastanza buono, ma sembra strano se il margine è impostato su un valore piccolo che rende l'intestazione parzialmente visibile. Inoltre, il margine della pagina non è impostato correttamente.
Nelle versioni più recenti di Chrome , l'intestazione e il piè di pagina del browser sono nascosti se il margine @page è impostato in modo tale che la posizione dell'intestazione / piè di pagina sia in conflitto con il contenuto. Secondo me, questo è esattamente come dovrebbe comportarsi.

Quindi la conclusione è che Chrome ha la migliore implementazione di questo rispetto a nascondere l'intestazione / piè di pagina.

— soggezione
fonte

1

Per chiarire, questo non sembra rimuovere le intestazioni con Firefox 21 o IE10, anche se sospetto che l'intestazione / il piè di pagina non occupino spazio. Funziona con Chrome 28.

— amh15

2

Ho aggiornato per riflettere le versioni più recenti del browser. Chrome ha ora la migliore implementazione di questo.

— timore

@SearchForKnowledge: Sì, è come ho detto - se leggi la mia risposta sotto la descrizione su come si comporta in IE: "Vedrai che il contenuto della pagina è effettivamente posizionato correttamente, ma l'intestazione e il piè di pagina del browser nascondono la pagina contenuto in quella posizione ". Dico che "ha effetto" in IE 8, non che funzioni come vogliamo ... Modificherò la mia risposta per renderlo più chiaro.

— timore

Rimuove le intestazioni, ma anche il margine sinistro. Quindi tutto il mio testo è ora sul bordo della pagina.

— Mittchel,

7

Questa soluzione semplicemente non funziona affatto , perché @pagemargini e bodymargini sono cose fondamentalmente diverse: il bodymargine si applica solo a tutto il corpo , vale a dire la parte superiore della prima pagina e la parte inferiore dell'ultima pagina. Per tutte le pagine intermedie, la parte superiore / inferiore avrà comunque un margine zero.

— Konrad Rudolph,

86

Qualsiasi versione recente di Chrome e Opera, nonché Firefox 48 alpha 1 e versioni successive

È possibile impostare il margine della pagina su una dimensione troppo piccola per contenere il testo per disabilitarlo (prendendo in prestito dalla risposta di soggezione ):

@page {
  size: auto;  /* auto is the initial value */
  margin: 0mm; /* this affects the margin in the printer settings */
}
html {
  background-color: #FFFFFF;
  margin: 0px; /* this affects the margin on the HTML before sending to printer */
}
body {
  border: solid 1px blue;
  margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}

<ol>
  <li>
    <a href="data:,No Javascript :-(" target="_blank">Middle-click to open in new tab</a>
  </li>
  <li>
    <a href="javascript:print()">Print</a>
  </li>
</ol><!-- Hack to work around stack snippet restrictions --><script type=application/javascript>document.links[0].href="data:text/html;charset=utf-8,"+encodeURIComponent('<!doctype html>'+document.documentElement.outerHTML)</script>

Espandi frammento

Per versioni di Firefox fino a 48 alpha 1

È possibile aggiungere un mozNoMarginBoxesattributo al <html>tag per impedire la stampa dell'URL, dei numeri di pagina e altre cose che Firefox aggiunge al margine della pagina.

Funziona in Firefox 29 e versioni successive. Puoi vedere una schermata della differenza qui , o vedere qui per un esempio dal vivo.

Si noti che l' mozDisallowSelectionPrintattributo nell'esempio non è richiesto per rimuovere il testo dai margini; vedi Cosa fa l'attributo mozdisallowselectionprint in PDF.js? .

Altri browser

Sfortunatamente, non sembra esserci modo di risolvere questo problema in Internet Explorer, quindi dovrai ricorrere a PDF o chiedere agli utenti di disabilitare i testi a margine.

Lo stesso vale per Safari; secondo un commento di @Luiz Perez , le versioni più recenti di Safari (8, 9.1 e 10) non supportano ancora la @pagesoppressione dei testi a margine.

Non riesco a trovare nulla su Edge e non ho un'installazione di Windows 10 disponibile per il test.

— user2428118
fonte

5

onestamente, sono d'accordo con questo. Funziona anche in Chrome se si stampa utilizzando "Finestra di dialogo Sistema". assicurati solo che <!DOCTYPE html> <html moznomarginboxes mozdisallowselectionprint>sia impostato. Fonte:https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383

— Peter,

3

Funziona alla grande su Firefox. Quindi, insieme @page{ size: auto; margin: 3mm; } a supportare Chrome e Safari, ho fatto una soluzione cross-browser per me.

— Clain Dsilva,

Questa soluzione funziona davvero bene per la rimozione di informazioni / contenuti indesiderati in materiali stampati in formato FF. Grazie!

— Varvara Jones,

Questo è fantastico, ma per quanto riguarda IE?

— Santosh,

1

Ho testato questo frammento su Safari 8, 9.1 e 10 e non rimuove l'intestazione o il piè di pagina in quelle versioni di Safari.

— Luis Perez,

21

Come @Awe aveva detto sopra, questa è la soluzione, che si conferma funzionare in Chrome !!

Assicurati solo che sia INSIDE i tag head:

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

    body 
    {
        background-color:#FFFFFF; 
        border: solid 1px black ;
        margin: 0px;  /* this affects the margin on the content before sending to printer */
   }
</style>
</head>

— Lavori
fonte

3

Questa è un'ottima soluzione! Rimuove i margini e rimuove l'intestazione e il piè di pagina. La mia unica modifica è stata quindi aggiungere padding: 0.25in 0.5in;gli stili del corpo in modo da avere i margini esatti di cui ho bisogno per una stampa bella e pulita. Lavorando in Chrome v25 e per fortuna per questo particolare progetto, possiamo chiedere agli utenti finali di scegliere tra un paio di browser moderni.

— Charlie Schliesser,

2

Sfortunatamente ciò causa problemi con le stampe multi-pagina. Il testo nella parte inferiore della pagina viene troncato.

— Jonathan,

Funziona perfettamente su Chrome 67.0.3396.99 e Firefox 62.0b5 con output a pagina singola.

— killscreen,

16

Ho una richiesta simile da parte di un cliente che desidera rimuovere l'intestazione, i numeri di pagina e il piè di pagina HTML. In questo caso, il client presenta una pagina HTML che può raddoppiare come certificato formale. L'URL, la pagina e l'intestazione aggiunti sono irrilevanti e portano a un prodotto finale poco piacevole. In un certo senso, sembra solo economico.

Media = Stampa non è stato in grado di disabilitare queste impostazioni predefinite del browser. L'unica soluzione consiste nel dire all'utente di fare clic sul pulsante "Gear" e attivare / disattivare tali elementi. Scherzi a parte, non avevo idea di poterlo fare per 20 anni (e pensiamo che l'utente tipico avrà la minima idea di fare clic sul pulsante di attivazione / disattivazione?).

Se CSS supporta Media = Stampa, dovrebbe supportare la capacità di controllare l'intera esperienza di stampa dell'utente finale. Apprezzo che i browser forniscano i campi aggiunti, ma perché non consentire ai CSS di controllare l'esperienza di stampa complessiva, se è quello che si desidera. Una soluzione al 90% potrebbe essere al 100% con altri tre campi! Un semplice:

#BrowserPrintDefaults{display:none}

basterebbe.

Ancora una volta, non importa se l'utente finale vuole stamparlo o meno (forse il tuo cliente è molto privato e non vuole che gli URL stampati fluttuino in giro. O forse un team esecutivo utilizza un sito di collaborazione privato?). Contento di difendere l'utente finale, ma se qualcuno cerca una risposta, non rispondere dicendo che è il diritto dell'utente finale di mostrare o nascondere. A volte è il diritto del cliente a pagare le bollette.

— CAL
fonte

Alla fine ho rinunciato, per quanto non volessi. Sono assolutamente d'accordo che questo dovrebbe essere esposto nei CSS, poiché tutti i browser hanno queste impostazioni ed è un elemento di presentazione. Ma questa è invece una preferenza a livello di applicazione, come se i cookie fossero disattivati.

— Anthony,

1

È uno standard CSS ufficiale che utilizza la @Pagedirettiva per impostare il margine della stampante (che non è lo stesso del margine del corpo della pagina HTML). Attualmente questo è supportato da tutti i principali browser tranne Safari, ma il modo in cui influenza l'intestazione / piè di pagina varia. Le migliori implementazioni sono in Opera e Chrome.

— timore

6

Prova questo codice, funziona al 100% per me:
FOR Landscape:

<head>
<style type="text/css">

@page{
  size: auto A4 landscape;
  margin: 3mm;
}

</style>
</head>

PER Portait:

<head>
<style type="text/css">

@page{
  size: auto;
  margin: 3mm;
}

</style>
</head>

— Iyes boy
fonte

1

Le regole della pagina CSS imposteranno i margini, ma non rimuoveranno l'intestazione e il piè di pagina integrati posizionati dal browser (URL della pagina, numero di pagina, ecc.)

— Anthony

0

Dato che hai menzionato "nel loro browser" e firefox, se stai utilizzando Internet Explorer, puoi disabilitare l'intestazione / piè di pagina impostando temporaneamente il valore nel registro, vedi qui per un esempio. AFAIK Non ho sentito parlare di un modo per farlo all'interno di altri browser. Sia le risposte di Daniel che quelle di Mickel sembrano scontrarsi l'una con l'altra, immagino che potrebbe esserci un'impostazione simile da qualche parte nel registro per firefox per rimuovere intestazioni / piè di pagina o personalizzarle. L'hai verificato?

Spero che questo aiuti e buone vacanze, cordiali saluti, Tom.

— t0mm13b
fonte

1

In IE7 +, puoi disabilitare intestazione / piè di pagina con un semplice clic del pulsante in Anteprima di stampa. Non c'è bisogno di farlo nel registro!

— timore reverenziale

0

Margine @pagina: 0mm ora funziona in Firefox 19.0a2 (2012-12-07).

— thinsoldier
fonte

0

Ho risolto il mio problema usando alcuni CSS nella pagina web.

<style media="print">
   @page {
      size: auto;
      margin: 0;
  }
</style>

— Kabir Hossain
fonte

0

Questo ha funzionato per me con un margine di circa 1 cm

@page 
{
    size:  auto;   /* auto is the initial value */
    margin: 0mm;  /* this affects the margin in the printer settings */
}
html
{
    background-color: #FFFFFF; 
    margin: 0mm;  /* this affects the margin on the html before sending to printer */
}
body
{
    padding:30px; /* margin you want for the content */
}

— Afshin
fonte

Disabilitare le opzioni di stampa del browser (intestazioni, piè di pagina, margini) dalla pagina?

Ecco come si comporta in diversi browser:

Qualsiasi versione recente di Chrome e Opera, nonché Firefox 48 alpha 1 e versioni successive

Per versioni di Firefox fino a 48 alpha 1

Altri browser