Stampare una pagina col Dhtml

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

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>

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (107.930)

:: Breve guida a jQuery (98.633)

:: Le espressioni regolari in Javascript (84.992)

:: Gestione delle stringhe in Javascript (74.990)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (41.670)

:: Menu orizzontale dinamico in Dhtml (37.191)

:: Gli Array in Javascript (35.938)

:: Temporizzazioni Javascript (31.634)

:: Istruzion condizionali in Javascript: if e switch (28.947)

:: DOM: rendere cross-browser il comando innerHTML (28.106)

IN EVIDENZA
DOWNLOAD