Stampa orizzontale da HTML
https://stackoverflow.com/questions/138422
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Ho un report HTML, che deve essere stampato in orizzontale a causa delle numerose colonne. C'è un modo per farlo, senza che l'utente debba modificare le impostazioni del documento?
E quali sono le opzioni tra i browser.
Soluzione
Nel tuo CSS puoi impostare la proprietà @page come mostrato sotto.
@media print{@page {size: landscape}}
La pagina @ fa parte della specifica CSS 2.1 tuttavia questa dimensione non è quella evidenziata dalla risposta alla domanda Is @Page {size : landscape} obsoleto? :
CSS 2.1 non specifica più l'attributo size. L'attuale funzionamento la bozza per il modulo CSS3 Paged Media lo specifica (ma non lo è standard o accettato).
Come indicato, l'opzione delle dimensioni proviene da Specifica bozza CSS 3 . In teoria può essere impostato sia sulla dimensione della pagina che sull'orientamento sebbene nel mio campione la dimensione sia omessa.
Il supporto è molto mescolato con un la segnalazione di bug inizia archiviata in firefox , la maggior parte dei browser non supportarlo.
Può sembrare che funzioni in IE7, ma questo perché IE7 ricorderà l'ultima selezione degli utenti di paesaggio o ritratto nell'anteprima di stampa (solo il browser viene riavviato).
Questo articolo ha suggerito alcune soluzioni alternative utilizzando JavaScript o ActiveX che inviano le chiavi al browser degli utenti, sebbene non siano ideali e si basano sulla modifica delle impostazioni di sicurezza del browser.
In alternativa, è possibile ruotare il contenuto anziché l'orientamento della pagina. Questo può essere fatto creando uno stile e applicandolo al corpo che include queste due linee ma ha anche degli svantaggi che creano molti problemi di allineamento e layout.
<style type="text/css" media="print">
.page
{
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
L'ultima alternativa che ho trovato è quella di creare una versione orizzontale in un PDF. Puoi indicarlo quando l'utente seleziona stampa, stampa il PDF. Tuttavia non sono riuscito a ottenere questo per il lavoro di stampa automatica in IE7.
<link media="print" rel="Alternate" href="print.pdf">
In conclusione in alcuni browser è facile la relatività usando l'opzione @page size, tuttavia in molti browser non esiste un modo sicuro e dipende dal contenuto e dall'ambiente. Questo forse perché Google Documents crea un PDF quando viene selezionata la stampa e quindi consente all'utente di aprirlo e stamparlo.
Altri suggerimenti
La mia soluzione:
<style type="text/css" media="print">
@page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>
Funziona in IE , Firefox e Chrome
Citato da CSS-Discuss Wiki
La regola @page è stata ridotta ambito da CSS2 a CSS2.1. Il pieno Secondo quanto riferito, la regola CSS2 @page implementato solo in Opera (e buggily anche allora). I miei test lo dimostrano IE e Firefox non supportano @page su tutti. Secondo l'ormai obsoleto È la sezione 13.2.2 delle specifiche CSS2 possibile sovrascrivere l'utente impostazione dell'orientamento e (per esempio) forzare la stampa in orizzontale ma la relativa "dimensione" proprietà ha stato eliminato da CSS2.1, coerente con il fatto che nessun browser corrente lo supporta. È stato ripristinato il modulo CSS3 Paged Media ma nota che questo è solo un progetto di lavoro (come a luglio 2009).
Conclusione: dimenticare su @page per il momento. Se tu sento che il tuo documento deve essere stampato in orientamento orizzontale, chiediti se puoi invece realizzare il tuo design più fluido. Se proprio non puoi (forse perché il documento contiene tabelle di dati con molte colonne, per esempio), dovrai avvisare utente su cui impostare l'orientamento Paesaggio e forse delineare come fallo nei browser più comuni. Di certo, alcuni browser hanno una stampa funzione adatta per larghezza (termoretraibile) (ad esempio Opera, Firefox, IE7) ma lo è sconsigliabile fare affidamento su utenti che hanno questa funzione o averlo cambiato on.
Prova ad aggiungere questo tuo CSS:
@page {
size: landscape;
}
Potresti essere in grado di utilizzare la Regola @page CSS 2 che consente impostare la proprietà 'size' su landscape .
La proprietà size è ciò che cerchi come detto. Per impostare l'orientamento e le dimensioni della pagina durante la stampa, è possibile utilizzare quanto segue:
/* ISO Paper Size */
@page {
size: A4 landscape;
}
/* Size in mm */
@page {
size: 100mm 200mm landscape;
}
/* Size in inches */
@page {
size: 4in 6in landscape;
}
Ecco un link alla @page documentazione .
Non è sufficiente solo ruotare il contenuto della pagina. Ecco un CSS giusto che funziona nella maggior parte dei browser (Chrome, Firefox, IE9 +).
Innanzitutto imposta body su 0, altrimenti i margini della pagina saranno maggiori di quelli impostati nella finestra di dialogo di stampa. Imposta anche il colore background per visualizzare le pagine.
body {
margin: 0;
background: #CCCCCC;
}
margin , border e background sono necessari per visualizzare le pagine.
padding deve essere impostato sul margine di stampa richiesto. Nella finestra di dialogo di stampa è necessario impostare gli stessi margini (10 mm in questo esempio).
div.portrait, div.landscape {
margin: 10px auto;
padding: 10mm;
border: solid 1px black;
overflow: hidden;
page-break-after: always;
background: white;
}
La dimensione della pagina A4 è 210mm x 297mm. È necessario sottrarre i margini di stampa dalla dimensione. E imposta la dimensione del contenuto della pagina:
div.portrait {
width: 190mm;
height: 276mm;
}
div.landscape {
width: 276mm;
height: 190mm;
}
Uso 276 mm anziché 277 mm, perché browser diversi scalano le pagine in modo leggermente diverso. Quindi alcuni di essi stamperanno contenuti di 277 mm di altezza su due pagine. La seconda pagina sarà vuota. È più sicuro usare 276mm.
Non abbiamo bisogno di margine , border , padding , background sulla pagina stampata, quindi rimuovili:
@media print {
body {
background: none;
-ms-zoom: 1.665;
}
div.portrait, div.landscape {
margin: 0;
padding: 0;
border: none;
background: none;
}
div.landscape {
transform: rotate(270deg) translate(-276mm, 0);
transform-origin: 0 0;
}
}
Nota che l'origine della trasformazione è 0 0 ! Anche il contenuto delle pagine orizzontali deve essere spostato di 276 mm verso il basso!
Inoltre, se disponi di un mix di pagine ritratto e paesaggio, IE rimpicciolirà le pagine. Lo ripariamo impostando -ms-zoom su 1.665. Se lo imposti su 1.6666 o qualcosa del genere, il bordo destro del contenuto della pagina potrebbe essere ritagliato a volte.
Se hai bisogno del supporto di IE8- o di altri browser precedenti puoi usare -webkit-transform , -moz-transform , filter: progid: DXImageTransform.Microsoft .BasicImage (rotazione = 3) . Ma per i browser abbastanza moderni non è necessario.
Puoi anche usare l'attributo css non standard solo per IE la scrittura in modalità
div.page {
writing-mode: tb-rl;
}
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
non funziona in Firefox 16.0.2 ma funziona in Chrome
Ho provato a risolvere questo problema una volta, ma tutta la mia ricerca mi ha portato a controlli / plug-in ActiveX. Non c'è alcun trucco che i browser (almeno 3 anni fa) hanno permesso di modificare qualsiasi impostazione di stampa (numero di copie, formato carta).
Metto i miei sforzi nell'avvertire attentamente l'utente che devono selezionare "paesaggio" quando viene visualizzata la finestra di dialogo di stampa del browser. Ho anche creato un'anteprima di stampa " pagina, che ha funzionato molto meglio di IE6! La nostra applicazione conteneva tabelle di dati molto ampie in alcuni report e l'anteprima di stampa ha chiarito agli utenti quando la tabella si sarebbe rovesciata dal bordo destro del foglio (poiché IE6 non poteva far fronte alla stampa su 2 fogli).
E sì, le persone usano ancora IE6 anche adesso.
<style type="text/css" media="print">
.landscape {
width: 100%;
height: 100%;
margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1);
}
</style>
Se si desidera applicare questo stile a una tabella, creare un tag div con questa classe di stile e aggiungere il tag table all'interno di questo tag div e chiudere il tag div alla fine.
Questa tabella verrà stampata solo in orizzontale e tutte le altre pagine verranno stampate solo in modalità verticale. Ma il problema è se la dimensione della tabella è superiore alla larghezza della pagina, quindi potremmo perdere alcune delle righe e talvolta anche le intestazioni vengono perse. Stai attento.
Buona giornata.
Grazie, Naveen Mettapally.
Ho creato un documento MS vuoto con impostazione orizzontale e poi l'ho aperto nel blocco note. Ho copiato e incollato quanto segue nella mia pagina html
<style type="text/css" media="print">
@page Section1
{size:11 8.5in;
margin:.5in 13.6pt 0in 13.6pt;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:4;}
div.Section1
{page:Section1;}
</style>
<div class="Section1"> put text / images / other stuff </div>
L'anteprima di stampa mostra le pagine in formato orizzontale. Questo sembra funzionare bene su IE e Chrome, non testato su FF.
Questo ha funzionato anche per me:
@media print and (orientation:landscape) { … }
