Druk krajobrazowy z HTML

Moje rozwiązanie:

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

Cytowane z CSS-Discuss Wiki

Reguła @ page została wycięta w zakres od CSS2 do CSS2.1. Pełna CSS2 @ reguła strony była podobno zaimplementowane tylko w Operze (i nawet wtedy). Moje własne testy pokazują, że IE i Firefox nie obsługują @page w wszystkie. Według obecnie przestarzałego CSS2 Spec sekcja 13.2.2 jest to możliwość nadpisania użytkownika ustawienie orientacji i (dla przykład) wymusza drukowanie w krajobrazie ale odpowiedni " rozmiar" nieruchomość posiada został usunięty z CSS2. 1, konsekwentnie z tym, że brak bieżącej przeglądarki wspiera. Został przywrócony w moduł Multimedialny CSS3 Paged, ale uwaga że jest to tylko roboczy szkic (jak stan na Lipiec 2009).

Wniosek: zapomnij about @ page for the present. Jeśli Poczuj, że twój dokument musi zostać wydrukowany w orientacji krajobrazowej zadaj sobie pytanie jeśli zamiast tego możesz zrobić swój projekt bardziej płynny. Jeśli naprawdę nie możesz (być może dlatego, że dokument zawiera tabele danych z wieloma kolumnami, dla przykład), trzeba będzie doradzić użytkownika, aby ustawić orientację na Krajobraz i być może zarysować, jak zrób to w najpopularniejszych przeglądarkach. Z oczywiście, niektóre przeglądarki mają Wydruk funkcja dopasowania do szerokości (shrink-to-fit) (np. Opera, Firefox, IE7) ale to niewskazane jest poleganie na użytkownikach mających tego obiektu lub o zamianie on

Możesz użyć CSS 2 @ page rule, która pozwala ustawić właściwość 'size' na landscape.

Spróbuj dodać swój CSS:

@page {
  size: landscape;
}

Możesz również użyć niestandardowego atrybutu CSS dla IE-only writing-mode

div.page    { 
   writing-mode: tb-rl;
}

Własność size jest tym, czego szukasz, jak wspomniano. Aby ustawić zarówno orientację, jak i rozmiar strony podczas drukowania, możesz użyć następującego polecenia:

/* ISO Paper Size */
@page {
  size: A4 landscape;
}

/* Size in mm */    
@page {
  size: 100mm 200mm landscape;
}

/* Size in inches */    
@page {
  size: 4in 6in landscape;
}

Oto link do dokumentacji @ page .

-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Nie działa w Firefoksie 16.0.2, ale działa w Chrome

Nie wystarczy tylko obrócić zawartość strony. Oto prawy CSS, który działa w większości przeglądarek (Chrome, Firefox, IE9+).

Najpierw ustaw ciało margin na 0, ponieważ w przeciwnym razie marginesy strony będą większe niż te ustawione w oknie drukowania. Ustaw także kolor background do wizualizacji stron.

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

margin, border i background są wymagane do wizualizacji stron.

padding należy ustawić wymagany margines wydruku. W oknie dialogowym Drukuj należy ustawić te same marginesy (10mm W ten przykład).

div.portrait, div.landscape {
  margin: 10px auto;
  padding: 10mm;
  border: solid 1px black;
  overflow: hidden;
  page-break-after: always;
  background: white;
}

Rozmiar strony A4 to 210mm x 297mm. od rozmiaru należy odjąć marginesy wydruku. I ustaw rozmiar zawartości strony:

div.portrait {
  width: 190mm;
  height: 276mm;
}
div.landscape {
  width: 276mm;
  height: 190mm;
}

Używam 276mm zamiast 277mm, ponieważ różne przeglądarki skalują strony trochę inaczej. Tak więc niektóre z nich wydrukują zawartość o wysokości 277 mm na dwóch stronach. Druga strona będzie pusta. Jest bardziej bezpieczny w użyciu 276 mm.

Nie potrzebujemy żadnych margin, border, padding, background na wydrukowanej stronie, więc usuń oni:

@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;
  }
}

Zauważ, że pochodzenie transformacji jest 0 0! Również zawartość stron krajobrazowych musi zostać przesunięta o 276 mm w dół!

Również jeśli masz połączenie portretu i stron lanscape IE będzie pomniejszyć strony. Naprawiamy to ustawiając -ms-zoom na 1.665. Jeśli ustawisz go na 1.6666 lub coś podobnego, prawa krawędź zawartości strony może być czasami przycięta.

Jeśli potrzebujesz obsługi IE8-lub innych starych przeglądarek możesz użyć -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3). Ale dla nowoczesnych wystarczy przeglądarek nie jest wymagane.

Próbowałem raz rozwiązać ten problem, ale wszystkie moje badania doprowadziły mnie do kontrolek/wtyczek ActiveX. Nie ma sztuczki, że przeglądarki (i tak 3 lata temu) zezwalały na zmianę dowolnych ustawień drukowania (liczba kopii, rozmiar papieru).

Włożyłem swoje wysiłki w Ostrzeżenie użytkownika ostrożnie, że trzeba wybrać "krajobraz", gdy pojawi się okno drukowania przeglądarki. Stworzyłem również stronę "Podgląd wydruku", która działała znacznie lepiej niż IE6! Nasza aplikacja miała bardzo szerokie tabele danych w niektórych raportach, i Podgląd wydruku jasno dla użytkowników, kiedy tabela będzie wyciekać z prawej krawędzi papieru (ponieważ IE6 nie może poradzić sobie z drukowaniem na 2 arkuszach albo).

I tak, ludzie nadal używają IE6 nawet teraz.

Utworzyłem pusty dokument MS z ustawieniem poziomym, a następnie otworzyłem go w notatniku. Skopiowane i wklejone do mojej strony 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>

Podgląd wydruku pokazuje strony w rozmiarze poziomym. To chyba działa dobrze na IE i Chrome, nie testowane na FF.

<style type="text/css" media="print">
.landscape { 
    width: 100%; 
    height: 100%; 
    margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1); 
} 
</style>

Jeśli chcesz, aby ten styl został zastosowany do tabeli, Utwórz jeden znacznik div z tą klasą stylu i Dodaj znacznik table wewnątrz tego znacznika div I Zamknij znacznik div na końcu.

Ta tabela będzie drukować tylko w poziomie, a wszystkie inne strony będą drukować tylko w trybie pionowym. Ale problem polega na tym, że jeśli rozmiar tabeli jest większy niż szerokość strony, możemy stracić niektóre wiersze i czasami nagłówki również są pominięte. Bądź ostrożny.

Dziękuję, Naveen Mettapally.

To też zadziałało dla mnie:

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