Vediamo come effettuare la stampa di un div con javascript attraverso due differenti soluzioni pratiche e veloci.
NOTA: Queste soluzioni non prevedono l’utilizzo di librerie esterne. Per una perfetta compatibilità e funzioni supplementari ti consiglio di utilizzare una libreria esterna come viene fatto in questo articolo:
-> Stampare un div o una porzione di pagina HTML con jPrintArea
Stampa di un div con javascript – soluzione 1
Il principio alla base di questa prima soluzione per la stampa di un div con javascript sta nel sostiture il body con l’html del div da stampare. Effettuare la stampa. E alla fine ripristinare il contenuto del body originale precedentemente salvato.
CODICE JS
var printContents = document.getElementById("IDStampa").innerHTML; //ID del div da stampare
var originalContents = document.body.innerHTML; // Contenuto originale del body
document.body.innerHTML = printContents; // Setta contenuto della pagina con il div da stampare
window.print(); //Stampa
document.body.innerHTML = originalContents; // ripristina contenuto della pagina originale
Codice CSS
/*PRINT LAYOUT */
#IDStampa, #IDStampa * {
visibility: hidden; /*Nascondo se non siamo in fase di stampa*/
}
@media print {
#IDStampa, #IDStampa * {
visibility: visible; /*Mostro se siamo in fase di stampa*/
position:absolute;
top:0; left:0;
}
}
/*PRINT LAYOUT */
Il problema di questa soluzione è nella gestione del js una volta chiusa la finestra di stampa. Essendo il codice originario copiato e re-incollato nel body tramite sostituzione alcuni js o script potrebbero non funzionare al ritorno in pagina dopo la stampa.
Stampa di un div con jQuery e popup – soluzione 2
Con jQuery (ma volendo potete fare il refactor del codice anche con vanilla javascript senza troppi problemi) possiamo cambiare il codice come segue:
CODICE JS
printEl=window.open(); //nuova finestra
printEl.document.write('<style> </style>'); // aggiungo eventuale style di stampa
printEl.document.write($('#IDStampa').html()); //popolo la finestra con il contenuto del div
printEl.print(); //Stampo
printEl.close(); // Chiudo finestra di stampa
Questa soluzione è sicuramente preferibile, anche se ormai i nuovi browser sono sempre piu restii a far usare il metodo window.open ( a causa del suo uso in popup pubblicitari).
In questo caso non andrete incontro a problemi di js post-stampa in quanto viene di fatto popolata una nuova finestra pulita con il div da stampare.
Consigli CSS per la stampa
Un ultimo consiglio che mi sento di darvi se volete stampare un div con javascript è sicuramente quello di eliminare i margini e le scritte che vengono innestate di default dal browser (es. chrome mette l’indirizzo e la pagina da stampare etc.).
Per farlo vi basterà usare questo CSS per pulire da tutte queste informazioni inutili il vostro layout di stampa.
@media print {
@page
{
size: auto;
margin: 0mm;
}
html
{
background-color: #FFFFFF;
margin: 0px;
}
body
{
margin: 0mm 0mm 0mm 0mm; /* gestisci qui i margini del contenuto */
}
}/*print*/
Una volta messo il css vedrete che la vostra preview di stampa sarà pulita dai vari page 1/1 e dall’url del sito in cui vi trovate.
Conclusioni
In entrambe le soluzioni va da sè che dovrete creare un button di stampa che al click andrà ad eseguire il codice js di stampa, come potete vedere in questo piccolo esempio:
Codice HTML
<button id="buttonStampa">Stampa</button>
Codice JS
$("#buttonStampa").on('click', function(c){
c.preventDefault();
console.log("Stampa");
//Codice di stampa - scegli una delle due soluzioni proposte
});//stampaButton
Questo articolo ti è stato utile? Condividilo sui tuoi social preferiti!
Image credits: “printing” disponibile su Shutterstock
