Stampare contenuto di un div con Javascript
- Gennaio 15, 2010
- by
- Donatantonio
In questa guida verrà descritto come stampare l’effettivo contenuto di un div o di un blocco all’interno di una pagina web.
Pensiamo ad esempio all’icona di stampa presente sul lato superiore degli script di questo sito, il suo scopo è quello di isolare tale blocco dal contesto della pagina e quindi permetterne la stampa.
Descriviamo il codice Javascript:
<script type="text/javascript">
function Stampa(){
// Prelevo dalla pagina solo i blocchi che interessano
// Ad esempio il titolo e il corpo di un articolo
var titolo = document.getElementById('titolo_articolo').innerHTML;
var corpo = document.getElementById('corpo_articolo').innerHTML;
// Apro una finestra pop-up nella quale inserisco i blocchi
var a = window.open('','','width=640,height=480');
a.document.open("text/html");
a.document.write("<html><head></head><body>");
// Scrivo il titolo e il corpo con un pò di stile in CSS
a.document.write("<div style='border: 1px solid #CCCCCC'>"+titolo+"</div><br/>"+corpo);
a.document.write("</body></html>");
a.document.close();
// Invio il documento alla stampante
a.print();
}
</script>
Vediamo ora la pagina web che contiene un articolo di esempio che vorremmo rendere poi stampabile:
<!-- Qui comincia un articolo ... Titolo + Corpo + Altro--> <div id='titolo_articolo'>Articolo di Esempio</div> <br/> <div id='corpo_articolo'> Questo è il testo dell'articolo di esempio...<br/> C'è scritto qualcosa che parla di qualcosa... </div> <br/> <div id='commenti'> Questi sono i commenti a questo articolo:<br/> .... ...... </div><br/> <!-- Inseriamo ora il bottone per inviare l'articolo alla stampa --> <!-- Invochiamo la funzione Stampa vista prima --> <input type='button' value='Stampa' onClick='Stampa()' />
Lo script è opportunamente commentato in ogni sua parte. La funzione Stampa preleva il contenuto dei blocchi d’interesse e invia la nuova pagina alla stampa grazie alla funzione print().
Cliccando qui è possibile vedere in azione il codice.
