Stampare una pagina web è molto semplice: tutti i browser supportano la possibilità di stampare il contenuto della pagina web visualizzata, tuttavia può essere utile (o comodo) inserire direttamente nella pagina web un pulsante per attivare la funzione di stampa.
In questo articolo vedremo come creare un bottone HTML grazie al quale l’utente del sito potrà attivare la funzione di stampa con un semplice click, senza cioè dover interagire con i menu del browser.
Inserire un pulsante / link per stampare la pagina web
Grazie a Javascript è possibile inserire, all’interno del nostro sito web, un pulsante/link per stampare il contenuto della pagina corrente in modo estremamente semplice. L’accesso alla finestra di stampa avviene mediante l’oggetto window.
Vediamo un esempio di bottone che, una volta premuto, attiverà la finestra di dialogo della stampa:
<button onclick="window.print();">
Stampa la pagina
</button>Qualora, al posto del bottone, si preferisse un link si userà questo codice:
<a href="javascript:window.print();">Stampa la pagina</a>Volendo è anche possibile avviare automaticamente il processo di stampa automaticaente, cioè senza alcuna richiesta esplicita dell’utente. Per farlo si farà ricorso all’evento onload direttamente nel corpo del documento:
<body onload="window.print();">L’effetto dei codici visti sopra sarà quello di avviare il processo di stampa del contenuto dell’intera pagina web. Ma se si volesse consentire all’utente di stampare una singola porzione della pagina e non l’intero documento? Sicuramente la faccenda si farebbe più complicata…
Inserire un pulsante / link per stampare una specifica porzione della pagina web
Volendo creare un pulsante in grado di attivare la stampa non dell’intero documento ma solo di una sua porzione si potrebbe agire nel modo seguente:
- Inseriamo, tra i tag <head> e </head>, la seguente funzione Javascript (incapsulandola, ovviamente, tra i tag <script> e </script>)
function stampa_id(ele_id) {
var nw = window.open();
nw.document.write(document.getElementById(ele_id).innerHTML);
nw.print();
nw.close();
}- Contrassegnamo il contenuto da stampare inserendolo all’interno di un elemento (ad esempio un paragrafo o un DIV) cui andremo ad assegnare un identificativo univoco attraverso l’attributo "id".
Ad esempio:
<p>... BLA BLA BLA ...</p>
<p id="da_stampare">... TESTO DA STAMPARE ...</p>
<p>... BLA BLA BLA ...</p>- Creiamo un pulsante per avviare la procedura di stampa della porzione di pagina desiderata.
Esempio:
<button onclick="stampa_id('da_stampare');">
Stampa
</button>Come potete notare, per avviare la stampa, abbiamo richiamato la nostra funzione "stampa_id()" passando in argomento l’id dell’elemento che contiene il contenuto che si desidera stampare.
Usare CSS per selezionare cosa stampare (e cosa non stampare)
Volendo personalizzare il risultato del processo di stampa della pagina web possiamo agire mediante i fogli di stile, integrando nel CSS del sito una serie di regole all’interno della direttiva @media print.
Una soluzione semplice per selezionare cosa stampare e cosa no potrebbe essere quella di applicare una specifica classe agli elementi della pagina che non vogliamo vengano stampanti (come, ad esempio, menu, banner, annunci pubblicitari, fotter, ecc.).
@media print {
.no-stampa { display: none !important; }
}Tutti gli elementi a cui assegneremo la classe "no-stampa" non verranno stampati.
