In questo articolo Javascript mostrerò l'uso della funzione print() per la stampa di documenti e pagine HTML.
Scenario
Capita a volte di dover dotare della funzione di stampa alcune parti di applicazioni WEB, per esempio nel caso che solo alcune zone della pagina sono ritenute interessanti o dopo la registrazione ad un servizio.
In questi casi, la funzione di stampa dei browsers non è ottimale in quanto permette solo di stampare l'intero documento, senza mettere in risalto le parti d'interesse.
Spesso, quindi, si ha la necessità di cambiare on the fly il layout del documento per migliorarne l'aspetto, rimuovendo parti non necessarie o cambiando alcuni oggetti contenuti nella pagina (select, campi di testo ecc..) sostituendoli con puro testo, al fine di ottenere una pagina di stampa il più possibile ottimizzata e comprensibile.
Javascript = Dinamicità
Grazie a JavaScript, ed in particolare alla funzione di stampa print() che l'oggetto window offre, si è in grado di inviare il contenuto della pagina visualizzata alle API del sistema operativo, che si farà carico della gestione di tutta la fase di stampa.
Lo script, che in questo articolo propongo, funziona con tutte le recenti versioni di IE ed Mozilla FireFox e Chrome, forse anche per i browsers Safari e Camino.
Di seguito è riportato il codice HTML, di esempio, di una pagina molto semplice composta di alcune parti utili alla stampa ed altre completamente inutili.
All'interno della pagina sono presenti 2 link:
- il primo stampa tutto il contenuto del layout;
- il secondo stampa solo l'esito di una fantomatica query di ricerca;
Il secondo link richiama la funzione Javascript Stampa() che prima di attivare il processo di stampa cambia on the fly il layout della pagina, lo stampa ed infine lo riporta come era in precedenza.
Di seguito la pagina HTML di esempio con il codice Javascript, come al solito ben commentato e testato:
<html>
<head>
<title> Pagina di Stampa</title>
<script type="text/JavaScript">
<!--
function Stampa() {
var intro1Div = document.getElementById("intro1");
var ricercaDiv = document.getElementById("ricerca");
var footerDiv = document.getElementById("ricerca");
var stampaTB = document.getElementById("stampa");
//Nascondo le parti non necessarie alla stampa
intro1Div.style.display = "None";
ricercaDiv.style.display = "None";
footerDiv.style.display = "None";
//Imposto la tabella con l'esito della ricerca
//in modo che occupi tutta la pagina
stampaTB.style.width = "100%";
//Lancia la funzione di stampa
window.print();
//Riporto tutto come era visualizzato precedentemente
stampaTB.style.width = "750px";
intro1Div.style.display = "";
ricercaDiv.style.display = "";
footerDiv.style.display = "";
}
//-->
</script>
</head>
<body>
<div id="intro1">
<h1>TITOLO DELLA PAGINA + LOGO + BANNER</h1>
<a href="javascript:window.print()">Stampa tutta la pagina</a>
</div>
<div id="ricerca">
<input type="text" value="Esegui una ricerca">
<input type="button" value="Cerca">
</div>
<div id="contenuto">
<table align="center" width="750px" border="1" id="stampa">
<tr>
<td colspan="3">Risultato della Ricerca</td>
</tr>
<tr>
<th valign="top" width="150">ID</th>
<th valign="top" width="450">Titolo</th>
<th valign="top" width="150">Autore</th>
</tr>
<tr>
<td valign="top" width="150">rttrr55</td>
<td valign="top" width="450">Paperino</td>
<td valign="top" width="150">Walt Disney</td>
</tr>
<tr>
<td valign="top" width="150">knknhty7</td>
<td valign="top" width="450">Ciao Ciao</td>
<td valign="top" width="150">AA.VV.</td>
</tr>
</table>
</div>
<a href="javascript:Stampa()">Stampa solo l'esito della ricerca</a>
<br><br>
<div id="footer" style="text-align: center;">
<a href="http://mirkoagrati.110mb.com">Home</a>
</div>
</body>
</html>
Come si può notare eseguendo l'esempio, il tutto é completamente gestibile da parte dello sviluppatore e l'avvio del processo di stampa avviene in maniera trasparente, cosa molto gradita agli internauti.
Alla prossima, MA.
Interessante utilizzo delle funzioni di controllo dello stile da parte di Javascript verso il DOM ma non era più semplice realizzare un semplice foglio di stile con media = print?
RispondiEliminaMarco Grazia
Ciao MarcoGrazia :)
RispondiEliminaGrazie del contributo: non importa quale tra i 2 metodi sia più facile, ciò che è realmente importante é la possibilità di scegliere.
Bye
MA
Non è una questione di facilità, ovvio che puoi scegliere, ma è più una questione di razionalità.
RispondiEliminaJavascript è un mezzo potente ma usarlo per ridefinire gli stili in un caso come il tuo è uno spreco di risorse.
A meno che non si voglia semplicemente far vedere quanto è possibile realizzare con tale linguaggio ^__^
M.
Ciao nuovamente MarcoGrazia.
RispondiEliminaPermettimi di non essere d'accordo con il tuo concetto di razionalità.
Conosci la libreria jQuery?
Bhé, se hai avuto modo di utilizzarla, o conoscerla, non ti pare sia un ottimo strumento per agire anche sugli stili dei vari componenti HTML della pagina?
Io la utilizzo molto. Utilizzo molto anche CSS, ma quest'ultima tecnologia la concepisco adatta per la creazione degli stili che si utilizzano per tutto il sito, o applicazione, mentre per l'eccezionalità di una singola pagina reputo più utile l'utilizzo di javascript e della dinamicitá che dona.
Le soluzioni si equivalgono e quindi la scelta di una o dell'altra tecnologia é una questione personale di 'stile'appunto. :)
Grazie per il quesito che hai posto perché chi leggerà questi post si troverá di fronte ad una scelta, e il dubbio, si sa, é il motore della ragione!
Bye
MA
Ciao, avrei bisogno di stampare una pagina in cui compaiono molti dati (con barra di scorrimento) però il window.print() mi stampa solo quello che vedo (barra scorrimento inclusa).
RispondiEliminaCome posso evitare questo inconveniente e stampare tutta la pagina completa senza vedere le barra?..
Grazie
Teresa
Ciao terbuo ;)
RispondiEliminaProva utilizzando un file CSS ad hoc per la stampa.
Utilizzando l'attributo media="print" sull'elemento HTML link puoi far si che in fase di stampa siano utilizzati in automatico i nuovi stili, nei quali avrai nascosto/spostato/ridotto le parti che non vuoi stampare.
Bye
MA