Come aggiungere un pulsante di stampa alla tua pagina Web

Annuncio pubblicitario

Sai, qualcosa come aggiungere un pulsante di stampa a una pagina web sembra abbastanza semplice, giusto? In effetti, perché è necessario aggiungere qualsiasi pulsante di stampa o collegamento alla pagina, quando tutto ciò che il lettore deve fare è fare clic su "File" e "Stampa…"Nel menu del browser?

Alla fine, persone diverse vogliono la funzione di stampa sulla loro pagina web per diversi motivi. Potresti semplicemente voler aggiungere comodità. Quando il lettore può semplicemente fare clic su un pulsante per ottenere una stampa, risparmia pochi clic e ogni clic conta. Altre persone vogliono personalizzare il testo stampato - in altre parole, nascondere determinati elementi della pagina dalla stampa. In altre situazioni, le persone preferiscono creare una versione stampabile e personalizzata del sito Web.

Per ognuna di queste situazioni, ci sono diverse soluzioni. Abbiamo sempre cercato di offrire soluzioni di stampa innovative qui a MUO, come l'articolo di Justin su

stampa su mezze pagine Risparmia carta formattando e stampando i tuoi file con lo strumento di imposizione di Govert [Windows]La carta costa denaro. Salva entrambi stampando i tuoi PDF su mezze pagine. Che tu voglia un opuscolo o copie affiancate, uno strumento gratuito per Windows non solo rende questo possibile, ma anche semplice. Piantala di fare casino... Leggi di più e l'articolo di Karl su PrintWhatYouLike PrintWhatYouLike- Risparmia carta e inchiostro durante la stampa di pagine Web Leggi di più . In questo articolo fornirò quattro modi in cui è possibile integrare un pulsante di stampa o un collegamento il tuo sito Web - dal semplicissimo approccio HTML e Javascript, al CSS più personalizzabile approccio.

Integrazione della stampa nel tuo sito Web

Quando guardi qualsiasi pagina web, è abbastanza facile capire perché potresti voler personalizzare la stampa. Una tipica pagina Web contiene annunci pubblicitari, banner, collegamenti pubblicitari, barre laterali e sezioni piè di pagina che non fanno altro che consumare spazio nella pagina e consumare inutilmente carta.

Se hai un sito Web abbastanza semplice o non ti interessa davvero se tutte le stampe di grafica e formattazione o meno non devi fare altro che aggiungere un semplice pulsante alla tua pagina web e utilizzare il metodo javascript "print ()" per inviare la pagina Web alla stampante.

Inserire questo codice nel tuo sito in una posizione facile e veloce da usare per i tuoi lettori è simile a questo.

Tutto ciò che il lettore deve fare è fare clic sul pulsante e la pagina verrà inviata direttamente alla stampante senza alcuna formattazione della pagina. Se la pagina supera la larghezza stampabile per la stampante, è possibile che si finisca per stampare molte più pagine di quanto sia effettivamente necessario.

Ad alcune persone non piace molto l'aspetto di un pulsante del modulo, quindi in alternativa puoi semplicemente utilizzare un link con il javascript incorporato per fare esattamente la stessa cosa.

Stampa questa pagina. 

Puoi vedere come in molti casi un semplice testo appaia molto più pulito di un pulsante, ma che usi davvero scende a quale sembra migliore nell'area della pagina Web in cui si desidera fornire la stampa caratteristica.

Come puoi vedere dalla stampa di esempio sopra, la formattazione di molti annunci e banner non corrisponde perfettamente alla visualizzazione del browser quando si utilizza semplicemente il comando di stampa. Ciò diventa molto più evidente per i siti Web più complessi. Un altro approccio che le persone usano è quello di bloccare intere sezioni del sito Web utilizzando i CSS e assegnare sezioni specifiche della pagina da stampare. Puoi farlo collegando prima il file CSS nella sezione dell'intestazione.

Successivamente, dovrai creare il file CSS effettivo e salvarlo nella stessa directory della tua pagina web. Il file CSS dovrebbe assegnare tutte le sezioni della pagina che non devono essere stampate, quindi rendere visibili gli elementi della pagina assegnati per la stampa.

Intestazione DIV #, DIV # newflash, banner DIV # {display: none;} body {visibilità: nascosto;} .print {visibilità: visibile;}

Ora che il tuo file CSS è impostato, tutto ciò che devi fare è passare attraverso la tua pagina e taggare ogni sezione con la classe "print".

Questa riga verrà stampata. 

Questa linea non lo farà. 

Ora puoi vedere nella stampa in cui solo le sezioni della pagina contrassegnate con la classe "print" vengono stampate sulla pagina e tutte le altre sezioni no. L'unica difficoltà con questo approccio è che devi assicurarti di disattivare il display per tutte le sezioni DIV che non vuoi stampare. Come puoi vedere di seguito, non ho aggiunto la sezione "div" per l'annuncio di Google, quindi ancora stampata.

Potrebbe essere necessario del tempo per creare il file CSS e disporre correttamente le classi. Se davvero non vuoi preoccuparti di farlo su ogni pagina, puoi optare per un ultimo approccio. Questa è la mia tecnica preferita per fornire versioni stampabili e perfettamente formattate della pagina web. Tutto quello che devi fare è creare una versione in formato PDF del contenuto della pagina Web, salvarla sul tuo host web e quindi collegare il file nell'intestazione della pagina.

Questo è tutto ciò che devi fare! Puoi incorporare il pulsante di stampa sul tuo sito proprio come negli esempi precedenti, ma invece del file CSS caricato per il metodo di stampa, il PDF, DOC o altro file viene inviato alla stampante. Come puoi vedere di seguito, questo genera la versione stampabile più pulita della tua pagina e puoi praticamente personalizzarla per apparire esattamente come vuoi.

Come puoi vedere, ci sono molte opzioni tra cui scegliere quando vuoi posizionare un pulsante di stampa o un link sulla tua pagina web. Ognuna di queste scelte funziona bene, ma la scelta giusta dipende davvero dalla complessità della pagina Web e dal contenuto che vuoi offrire ai tuoi lettori quando scelgono di stampare la tua pagina web.

Hai provato una di queste tecniche per aggiungere un pulsante di stampa a una pagina Web? Quale tecnica ti piace di più? Hai altre soluzioni? Condividi le tue opinioni nella sezione commenti qui sotto.

Credito immagine: Sundeip Arora