Talvolta capita di dover prevedere la possibilità di stampare su carta una pagina web : se la formattazione è un fattore importante (ad esempio pensiamo alla generaizone della stampa di un catagolo o di un brochure) suggerisco la generazione di un pdf tramite una libreria dedicata.
Talvolta però la formattazione stessa è così complessa e ricca di elementi che è più comodo tentare la stampa della pagina mediante la funzionalità base di stampa prevista dal browser…. e qui nascono i problemi!
Tramite le media query (in particolare quella standard per la stampa) è possibile cercare di adattare la pagina per ottenere il risultato ottimale su carta anche se spesso tale risultato fa veramente cagare non è propriamente adeguato!
Il mio consiglio? usiamo tutte le tecnologie a nostra disposizione per ottenere il meglio possibile!
E’ inutile fare salti mortali sulla media query print: preparate una pagina ad-hoc e otterrete esattamente il risultato desiderato, formattato come volete voi e senza inutile zavorra. Ovviamente una pagina ad-hoc non esula dall’utilizzo della media query print ma consente di usarla in modo specifico su una struttura il più possibile vicina alla nostra esigenza.
Trattandosi di una pagina ad-hoc è abbastanza brutto e poco professionale aprire un popup html per lanciare la stampa e poi lasciarlo aperto: si può risolvere tutto con poche righe di javascript.
(function() {
var printWindow = window;
setTimeout(function () {
printWindow.print();
var ival = setInterval(function() {
printWindow.close();
clearInterval(ival);
}, 200);
}, 500);
}());
All’apertura del popup si apre subito la maschera della stampa in preview mode, alla conferma (o annullamento) il popup si chiude da solo.
Se servono dei salti pagina è possibile utilizzare nei css il page-break-before
Per usarlo è sufficiente creare una classe ad-hoc da attribuire ad un < div > o ad un < p > e poi definire nei css il comportamento previsto:
@media all {
.page-break { display: none; }
}
@media print {
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
float: none;
}
.page-break { display: block; page-break-before: always; position: relative; }
}
Attenzione: vi dò una dritta importante (visto l’approssimarsi del Santo Natale) : se usate bootstrap i var col-md-xx, col-sx-xx aggiungono dei float:left che annullano i salti pagina pertanto eliminateli dai contenitori (o dappertutto come ho fatto io nello snippet di css che vedete sopra).
Infine, altra grossa rottura di scatole, stampare le immagini di backgroud: si tratta di un’opzione presente nella maschera di stampa della maggior parte dei browser ed è un’opzione che mi aspetterei attiva per default invece… invece no (mai ‘na gioia!).
Per ovviare assegnate la proprietà -webkit-print-color-adjust: exact; al container dell’oggetto che ha l’immagine di sfondo.
Questo risulta MOLTO utile per le mappe statiche di google!
Infine potreste desiderare di rimuovere i link alla pagina di origine che vengono mostrati per default in testa e a piede della pagina, se usate Bootstrap la regola è :
a[href]:after {
content: none !important;
}