Oggi vediamo come stampare agevolmente un div o una porzione di pagina HTML tramite l’uso dello script jPrintArea.
jPrintArea è uno script molto famoso ed estremamente utile e permette di stampare porzioni di pagina specificati tramite ID nella funzione. Usarla è estremamente semplice:
Collegamento e uso dello Script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="js/jquery.jPrintArea.js"></script>
All’interno del DOM aggiungiamo questa riga di codice:
$('.stampa').click(function(){ $.jPrintArea('#calendario') });
Nell’html invece posizioniamo il trigger, che, se premuto, farà partire lo script e la stampa della porzione di codice (nel nostro caso il calendario).
<a href="#" class="stampa" title="Stampa">Stampa</a>
Ovviamente assicuratevi di avere il div “contenitore” da stampare, nel caso dell’esempio il file HTML dovrà contenere un div di questo tipo:
<div id="calendario"> <h1>La mia prima stampa!</h1> </div>
Script jPrintArea Completo
jQuery.jPrintArea=function(el)
{
var iframe=document.createElement('IFRAME');
var doc=null;
$(iframe).attr('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc=iframe.contentWindow.document;
var links=window.document.getElementsByTagName('link');
for(var i=0;i<links.length;i++)
if(links[i].rel.toLowerCase()=='stylesheet')
doc.write('<link type="text/css" rel="stylesheet" href="'+links[i].href+'"></link>');
doc.write('<div class="'+$(el).attr("class")+'">'+$(el).html()+'</div>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
alert('Stampa in corso...');
document.body.removeChild(iframe);
}
Da una prima, veloce, analisi veloce posso consigliarvi di personalizzare da subito il testo dell’alert che appare prima della stampa [RIGA 16]. Di base lo script crea una pagina “fittizzia” (var IFRAME) contenente solamente la porzione di codice recuperata dal DIV ID che passiamo alla funzione.
jPrintArea è stato testato su tutti i browser.
Uno script completo e molto efficace, con un pò di modifiche è possibile aggiungere altresì header personalizzati e rendere unica la pagina da stampare. Una sola parola…consigliato!
