Stampare un div o una porzione di pagina HTML con jPrintArea

Stampare un div o una porzione di pagina HTML con jPrintArea
Freia

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.

Download Zip

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!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

10 bellissimi siti di presentazione per startup, applicazioni o progetti web

10 bellissimi siti di presentazione per startup, applicazioni o progetti web