jQuery: Stampare una porzione di pagina HTML

In questo articolo vedremo come consentire all’utente di stampare solo una porzione del contenuto di una pagina web. Questo consente di evitare la stampa del solo contenuto, ad esempio il testo, evitando di stampare immagini o parti del tema non utili. Faremo uso del plugin jQuery Print Area.

Come prima cosa definiamo un tag, ad esempio un div, che dovrà contenere la sezione che sarà inserita nella stampa.

Al suo interno andremo a scrivere il contenuto della nostra pagina:

Heading content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In lectus nisl, porttitor eget, fermentum et, viverra a, odio. Sed semper. Praesent vulputate nibh eget nisi. Sed ligula. Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis.

Sub section heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In lectus nisl, porttitor eget, fermentum et, viverra a, odio. Sed semper. Praesent vulputate nibh eget nisi. Sed ligula. Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis.

Andiamo ora a creare un anchor tag che consentirà all’utente di mandare in stampa il contenuto del div “content”.

Print

L’attributo rel contiene l’id del div da mandare in stampa.

Fatto ciò passiamo al codice javascript. Nel tag head della pagina si da per scontato l’inclusione di jQuery e del plugin Print Area.

Andiamo quindi a impostare un click listener sul tag anchor prima definito, che ha classe css print. Al suo interno richiameremo il metodo printArea().

$(function() {
$('.print').click(function() {
var container = $(this).attr('rel');
$('#' + container).printArea();
return false;
});
});

A questo punto verrà aperta la finestra di Anteprima di Stampa.

Pagina web da stampare
Anteprima di stampa contenente il solo testo da stampare.

Di seguito gli indirizzi a cui è possibile scaricare il plugin jQuery Print Area e visualizzare un esempio:

[like_to_read]

PLUGIN

ESEMPIO 

[/like_to_read]

Michele Pierri

Sviluppatore android/web/desktop, blogger, nonchè sostenitore incallito dell'universo Cloud Computing, nel tempo libero amo fare sport e praticare arti marziali.