Stampare una pagina col Dhtml

Pubblicità su lukeonweb.net a partire da 0,5 euro CPM e sconti fino al 50% !!!

» I più cliccati » I più votati

Web Wizard & Tools

Web Grafica

Siti utili

Cartucce per la Stampante

Homepage + Linguaggi + Javascript + Trucchi + Art.# 54

Autore: Luca Ruggiero

Corso Javascript e DHTML
Impara a creare controlli ed animazioni! Attestato finale ed assistenza del tutor online.

La stampa di una pagina informativa, didattica o di qualsiasi altro genere si tratti, è un argomento molto importante per gli autori di siti che necessitino di mettere a disposizione degli utenti la possibilità di stampare una pagina del loro sito.

Javascript mette a disposizione il metodo print() dell'oggetto window. Dunque, per offrire la possibilità di stampare una pagina nella sua integrità, è sufficiente inserire in un link, o in un bottone il seguente codice:

<a href="javascript:window.print()">Stampa questa pagina</a>

Diverso il discorso quando si desidera stampare solo una parte della pagina interessata, escludendo quindi i menu, i banner pubblicitari ed altri testi o immagini che non sono di interesse della stampa finale, per questo utilizzeremo il Dhtml, integrando Javascript con i Css.

Costruiamo un template Html in una tabella su cui lavorare:

<table align="center" width="750" border="1">
   <tr>
      <td colspan="3" id="intestazione">Intestazione della pagina, logo e banner</td>
   </tr>
   <tr>
      <td valign="top" width="150" id="sinistro">Menu laterale sinistro</td>
      <td valign="top" width="450" id="stampa">Corpo della pagina da stampare</td>
      <td valign="top" width="150" id="destro">Menu laterale destro</td>
   </tr>
</table>

Questa è semplicemete la struttura di base per la costruzione di un normale portale o di un sito organizzato a colonne.

Prima cosa da fare per organizzare questa struttura in modo da essere stampata senza l'aggiunta di elementi indesiderati, è assegnare un identificativo di tipo id agli elementi indesiderati, o meglio, per snellire il lavoro, alle celle che li contengono, ed un identificativo alla parte che si desidera stampare.

Ipotizziamo di voler stampare solo il corpo centrale della pagina, eliminando quindi i menu sulla sinistra e sulla destra e l'intestazione contenente il logo, il banner, eventuali menu orizzontali o quant'altro.

Gli id che assegneremo in questo esempio saranno intestazione per la cella orizzontale superiore, sinistro per il menu laterale sinistro, destro per il menu laterale destro e stampa al corpo centrale che intendiamo stampare.

Fatto questo, non ci resta che organizzare uno script che escluda le celle indesiderate dalla funzione di stampa, imposti a larghezza massima sullo schermo il contenuto del corpo centrale da stampare, lanci la funzione di stampa della pagina riorganizzata, reimposti, dopo l'esecuzione della stampa, la pagina al suo stato originale.

Questo è lo script completo per lo svolgimento di tali funzioni, basato sugli id assegnati alle celle come suddetto:

<script language="javascript">
 <!--
  function Stampa() {
     //Nasconde le celle indesiderate
        intestazione.style.display = "None";
        sinistro.style.display = "None";
        destro.style.display = "None";
     //Imposta la parte da stampare a tutto schermo
        stampa.style.width = "100%";
     //Lancia la funzione di stampa
        window.print();
     //Ripristina la parte da stampare alle dimensioni originali
        stampa.style.width = "450px";
     //Ripristina l'impostazione iniziale delle celle indesiderate
        intestazione.style.display = "";
        sinistro.style.display = "";
        destro.style.display = "";
  }
 //-->
</script>

Per eseguire la stampa sarà sufficiente richiamare su un link, o bottone, la funzione Stampa() appena creata:

<a href="javascript:Stampa()">Stampa questa pagina</a>