Come aggiungere un pulsante di stampa alla pagina Web

Sai, qualcosa come l'aggiunta di un pulsante di stampa a una pagina web sembra piuttosto semplice, giusto? Infatti, perché abbiamo anche bisogno di aggiungere qualsiasi pulsante di stampa o collegamento alla pagina, quando tutto quello che il lettore deve fare è cliccare su “File” e “Stampare… ” nel menu del browser?

In definitiva, diverse persone vogliono la funzionalità 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, salva pochi clic e ogni clic conta. Altre persone vogliono personalizzare il testo stampato - in altre parole, nascondere alcuni elementi della pagina dalla stampa. In altre situazioni, le persone preferiscono creare una versione stampabile attentamente 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 sulla stampa su mezze pagine Salva carta formattando e stampando i tuoi file con lo strumento di imposizione di Govert [Windows] Risparmia carta formattando e stampando i tuoi file con l'imposizione di Govert Strumento [Windows] La carta costa denaro. Salva entrambi stampando i tuoi PDF su mezze pagine. Sia che tu voglia un libretto o copie affiancate, uno strumento gratuito per Windows non solo lo rende possibile ma anche semplice. Smetti di scherzare ... Leggi altro e l'articolo di Karl su PrintWhatYouLike PrintWhatYouLike- Salva la carta e l'inchiostro quando stampa pagine Web PrintWhatYouLike- Salva la carta e l'inchiostro quando stampa pagine Web Ulteriori informazioni. In questo articolo fornirò quattro modi per integrare un pulsante o un collegamento di stampa nel tuo sito Web - dal semplice approccio HTML e Javascript, all'approccio CSS più personalizzabile.

Integrazione della stampa nel tuo sito web

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

Se hai un sito web abbastanza semplice, o non ti interessa davvero se tutte le grafiche e le formattazioni sono stampate, allora tutto ciò che devi fare è aggiungere un semplice pulsante alla tua pagina web e usare il “stampare()” metodo javascript per inviare la pagina Web alla stampante.

Inserendo questo codice nel tuo sito in un luogo che sia veloce e facile da usare per i tuoi lettori, assomiglia a questo.

Tutto ciò che il lettore deve fare è fare clic sul pulsante e la pagina verrà inviata direttamente alla stampante senza alcuna formattazione di pagina. Se la pagina è al di là della larghezza stampabile per la stampante, è possibile che si riesca a stampare molte più pagine di quelle effettivamente necessarie.

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

 Stampa questa pagina 

Puoi vedere come in molti casi un semplice testo sembra molto più pulito di un pulsante, ma in realtà si riduce a ciò che appare migliore nell'area della pagina Web in cui si desidera fornire la funzione di stampa.

Come si può 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. Questo diventa molto più evidente per i siti Web più complessi. Un altro approccio utilizzato dalle persone è il blocco di intere sezioni del sito Web tramite CSS e l'assegnazione di sezioni specifiche della pagina da stampare. Lo fai collegando prima il file CSS nella sezione dell'intestazione.

Successivamente, dovrai creare il vero file CSS e salvarlo nella stessa directory della tua pagina web. Il file CSS deve assegnare tutte le sezioni della pagina che non devono essere stampate, quindi anche rendere visibili gli elementi della pagina che si assegna alla stampa.

 DIV # header, DIV # newflash, DIV # banner display: none; body visibilità: hidden; .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 il “stampare” classe.

  Questa linea verrà stampata Questa linea non lo farà.  

Ora puoi vedere nella stampa dove solo le sezioni della pagina contrassegnate con “stampare” la classe viene stampata sulla pagina e tutte le altre sezioni no. L'unica difficoltà con questo approccio è che devi assicurarti di spegnere il display per tutte le sezioni DIV che non vuoi stampare. Come puoi vedere qui sotto, non ho aggiunto il “div” sezione per l'annuncio di Google, in modo che sia ancora stampato.

Può volerci del tempo per costruire il file CSS e disporre correttamente le classi. Se davvero non vuoi preoccuparti di farlo in ogni pagina, allora puoi optare per un ultimo approccio. Questa è la mia tecnica preferita per fornire versioni stampabili 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 come negli esempi sopra, ma invece del file CSS caricato per il metodo di stampa, il PDF, il 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 vedere esattamente come desideri.

Come puoi vedere, ci sono molte opzioni tra cui scegliere quando vuoi inserire un pulsante o un link di stampa sulla tua pagina web. Ognuna di queste scelte funziona bene, ma la scelta giusta dipende dalla complessità della pagina Web e dal contenuto che desideri 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ù? Avete altre soluzioni? Condividi la tua visione nella sezione commenti qui sotto.

Immagine di credito: Sundeip Arora

Scopri di più su: stampa, sviluppo Web, strumenti per i Webmaster.