Stampa orizzontale da HTML

Ho un rapporto 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.

Nel tuo CSS puoi impostare la proprietà @page come mostrato di seguito.

@media print{@page {size: landscape}}

La pagina @ fa parte della specifica CSS 2.1, tuttavia sizenon è così evidenziata dalla risposta alla domanda @Page {size: landscape} è obsoleto? :

CSS 2.1 non specifica più l'attributo size. L'attuale bozza di lavoro per il modulo CSS3 Paged Media lo specifica (ma questo non è standard o accettato).

Come indicato, l'opzione delle dimensioni proviene dalle specifiche del progetto 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 misto con una segnalazione di bug iniziata in firefox , la maggior parte dei browser non lo supporta.

Può sembrare che funzioni in IE7, ma questo perché IE7 ricorderà l'ultima selezione dell'utente di orizzontale o verticale nell'anteprima di stampa (solo il browser viene riavviato).

In questo articolo sono state suggerite alcune soluzioni alternative che utilizzano 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 metodo 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.

La mia soluzione:

<style type="text/css" media="print">
    @page { 
        size: landscape;
    }
    body { 
        writing-mode: tb-rl;
    }
</style>

Questo funziona in IE, FirefoxeChrome

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 marginsu 0, altrimenti i margini della pagina saranno maggiori di quelli impostati nella finestra di dialogo di stampa. Imposta anche il backgroundcolore per visualizzare le pagine.

body {
  margin: 0;
  background: #CCCCCC;
}

margin, borderE backgroundsono tenuti a visualizzare le pagine.

paddingdeve 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 le dimensioni 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 alcuna margin, border, padding, backgroundsulla pagina stampata, quindi rimuoverli:

@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! Inoltre, 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 eseguirà lo zoom indietro delle pagine. Lo ripariamo impostando -ms-zoomsu 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 avete bisogno di IE8- o di altri vecchi browser supportano è possibile utilizzare -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3). Ma per i browser abbastanza moderni non è richiesto.

Ecco una pagina di prova:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
      ...Copy all styles here...
    </style>
  </head>
  <body>
    <div class="portrait">A portrait page</div>
    <div class="landscape">A landscape page</div>
  </body>
</html>

Citato da CSS-Discuss Wiki

La regola @page è stata ridotta nell'ambito da CSS2 a CSS2.1. Secondo quanto riferito, l'intera regola CSS2 @page è stata implementata solo in Opera (e anche in modo corretto). I miei test dimostrano che IE e Firefox non supportano affatto @page. Secondo la sezione 13.2.2 della specifica CSS2 ormai obsoleta, è possibile ignorare l'impostazione dell'orientamento dell'utente e (ad esempio) forzare la stampa in Orizzontale, ma la relativa proprietà "size" è stata eliminata da CSS2.1, in linea con il fatto che nessun browser attuale lo supporta. È stato ripristinato nel modulo CSS3 Paged Media ma nota che si tratta solo di una bozza di lavoro (a luglio 2009).

Conclusione: dimentica di @page per il momento. Se ritieni che il tuo documento debba essere stampato con orientamento orizzontale, chiediti se puoi invece rendere il tuo progetto più fluido. Se davvero non puoi (forse perché il documento contiene tabelle di dati con molte colonne, per esempio), dovrai avvisare l'utente di impostare l'orientamento su Orizzontale e forse delineare come farlo nei browser più comuni. Ovviamente, alcuni browser hanno una funzione di adattamento alla larghezza della stampa (restringimento per adattamento) (ad esempio Opera, Firefox, IE7) ma è sconsigliabile affidarsi agli utenti che dispongono di questa funzione o di averla accesa.

Prova ad aggiungere questo tuo CSS:

@page {
  size: landscape;
}

La sizeproprietà è 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 documentazione di @page .

Potresti essere in grado di utilizzare la regola CSS 2 @page che ti consente di impostare la proprietà 'size' su landscape .

È inoltre possibile utilizzare la modalità di scrittura dell'attributo css non standard solo per IE

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 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.

Ho provato a risolvere questo problema una volta, ma tutta la mia ricerca mi ha portato a controlli / plug-in ActiveX. Non è un trucco che i browser (almeno 3 anni fa) abbiano permesso di modificare qualsiasi impostazione di stampa (numero di copie, formato carta).

Ho messo i miei sforzi nell'avvertire attentamente l'utente che avevano bisogno di selezionare "orizzontale" quando appariva la finestra di dialogo di stampa del browser. Ho anche creato una pagina di "anteprima di stampa", 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 sul 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 provato la risposta di Denis e ho riscontrato alcuni problemi (le pagine dei ritratti non venivano stampate correttamente dopo aver cercato le pagine con paesaggi), quindi ecco la mia soluzione:

body {
  margin: 0;
  background: #CCCCCC;
}

div.page {
  margin: 10px auto;
  border: solid 1px black;
  display: block;
  page-break-after: always;
  width: 209mm;
  height: 296mm;
  overflow: hidden;
  background: white;
}

div.landscape-parent {
  width: 296mm;
  height: 209mm;
}

div.landscape {
  width: 296mm;
  height: 209mm;
}

div.content {
  padding: 10mm;
}

body,
div,
td {
  font-size: 13px;
  font-family: Verdana;
}

@media print {
  body {
    background: none;
  }
  div.page {
    width: 209mm;
    height: 296mm;
  }
  div.landscape {
    transform: rotate(270deg) translate(-296mm, 0);
    transform-origin: 0 0;
  }
  div.portrait,
  div.landscape,
  div.page {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }
}

<div class="page">
  <div class="content">
    First page in Portrait mode
  </div>
</div>
<div class="page landscape-parent">
  <div class="landscape">
    <div class="content">
      Second page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
    </div>
  </div>
</div>
<div class="page">
  <div class="content">
    Third page in Portrait mode
  </div>
</div>

Questo ha funzionato anche per me:

@media print and (orientation:landscape) { … }

Se vuoi vedere il panorama sullo schermo prima di stampare, oltre a stampare, poi nei tuoi CSS, puoi impostare la larghezza su 900px e l'altezza su 612px.

OP non ha menzionato il formato A4. Presumo che sia la dimensione della lettera nei miei numeri sopra.

Puoi provare quanto segue:

@page {
    size: auto
}