JS: Pulsante per stampare

Inviato da Webmaster il Agosto 25, 2011 - 16:12

-Fare un pulsante che stampa la pagina attuale-

Stampare delle pagine Web può sembrare contro-intuitivo per alcuni di noi webmaster utilizzati a leggere tutto su uno schermo, ma non dobbiamo sottovalutare quanto è grande (e utile) la domanda. Gli utenti possono volere stampare per mantenere un riferimento concreto delle informazioni o semplicemente per leggerlo più tardi nella metropolitana. Le ragioni non sono molto importante ed è così semplice da fare che vale la pena offrire questa possibilità. Ecco come:

 

Il pulsante Stampa

In realtà, non si intende di stampare la pagina corrente, quello che facciamo è di reindirizzare l'utente a una pagina stampabile che automaticamente richiede di essere se stessa stampata.

 

<form action="pagina_stampabile.html" target="_blank">

<input type=submit value="Stampa">

</form>

 

Tutto il segreto si trova in questa seconda pagina che si deve lanciare in un'altra finestra del browser, stampare e poi chiudere, il tutto automaticamente.

 

La pagina stampabile

Il primo passo è quello di rendere questa pagina stampabile. La pagina_stampabile.html conterrà solo le informazioni essenziali (nessuna intestazione, piè di pagina o barre laterali), senza colori (solo se assolutamente necessario), nessuna animazione o funzione interattiva... avete capito, dovrebbe assomigliare più o meno come una pagina da un libro. Per rendere questo più facile si dovrebbe associare un file CSS diverso da quello associato al contenuto originale, un CSS che è specifico per tutte le pagine stampabili in contrasto con il solito, fighissimo CSS che utilizzi di solito sul tuo sito.

Il secondo passo è piuttosto semplice e fa tutta la magia del pulsante di stampa accadere. Sul tag body di pagina_stampabile.html è necessario aggiungere questa istruzione javascript:

 

<body onload="window.print();window.close()">

 

Questa tag magica prima, chiederà all'utente di configurare la pagina con il suo solito driver della stampante, poi si stampa (o cancella), la pagina si chiude e l'utente sarà di nuovo al punto iniziale (dove c'è il pulsante stampa) mentre la sua pagina comincia a stampare.

Ecco fatto! L'unica cosa che davvero dovrebbe pensare è quello di creare una pagina che sembra buona su carta. Dopo aver ottenuto tutte le regole di stile giuste, basta applicare questo stesso CSS a qualsiasi altra pagina che si desidera stampare. E 'una buona pratica pur non incoraggiare troppo la stampa, come tutti sappiamo il nostro pianeta soffre di consumo inconsiderato. Detto questo, a volte una pagina stampata può salvare l'energia che si dovrebbe spendere altrimenti con la lettura su un computer!

 

 


Aggiungi un commento