Druk poziomy z HTML

Mam raport HTML, który należy wydrukować w orientacji poziomej z powodu wielu kolumn. Czy istnieje sposób, aby to zrobić, bez konieczności zmiany ustawień dokumentu przez użytkownika?

Jakie są opcje wśród przeglądarek.

W swoim CSS możesz ustawić właściwość @page, jak pokazano poniżej.

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

Strona @ jest częścią specyfikacji CSS 2.1, jednak sizeodpowiedź na to pytanie nie jest tak podkreślona. Czy strona @ rozmiar: krajobraz} jest przestarzała? :

CSS 2.1 nie określa już atrybutu size. Obecny projekt roboczy dla modułu stronicowanych mediów CSS3 określa to (ale nie jest to standard ani akceptacja).

Jak wspomniano, opcja rozmiaru pochodzi ze specyfikacji projektu CSS 3 . Teoretycznie można ustawić zarówno rozmiar strony, jak i orientację, chociaż w mojej próbie rozmiar ten został pominięty.

Obsługa jest bardzo zróżnicowana - zgłoszenie błędu zaczyna się w Firefoksie , większość przeglądarek go nie obsługuje.

Może się wydawać, że działa w IE7, ale dzieje się tak, ponieważ IE7 zapamięta ostatni wybór krajobrazu lub portretu w podglądzie wydruku (tylko przeglądarka zostanie ponownie uruchomiona).

W tym artykule zaproponowano kilka obejść przy użyciu JavaScript lub ActiveX, które wysyłają klucze do przeglądarki użytkownika, chociaż nie są one idealne i polegają na zmianie ustawień zabezpieczeń przeglądarki.

Alternatywnie możesz obrócić zawartość zamiast orientacji strony. Można to zrobić, tworząc styl i stosując go do bryły zawierającej te dwie linie, ale ma to również swoje wady powodujące wiele problemów z wyrównaniem i układem.

<style type="text/css" media="print">
    .page
    {
     -webkit-transform: rotate(-90deg); 
     -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
</style>

Ostatnią alternatywą, którą znalazłem, jest utworzenie wersji poziomej w pliku PDF. Możesz wskazać tak, gdy użytkownik wybierze wydruk, drukuje plik PDF. Jednak nie mogłem tego uzyskać do automatycznego drukowania w IE7.

<link media="print" rel="Alternate" href="print.pdf">

Podsumowując, w niektórych przeglądarkach względność jest łatwa przy użyciu opcji @page size, jednak w wielu przeglądarkach nie ma pewnej metody i zależy to od zawartości i środowiska. Być może dlatego Dokumenty Google tworzą plik PDF po wybraniu opcji wydruku, a następnie pozwalają użytkownikowi go otworzyć i wydrukować.

Moje rozwiązanie:

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

To działa IE, FirefoxiChrome

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

Najpierw ustaw wartość margin0, ponieważ w przeciwnym razie marginesy strony będą większe niż marginesy ustawione w oknie dialogowym drukowania. Ustaw także backgroundkolor, aby wizualizować strony.

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

margin, borderI backgroundsą zobowiązani do wizualizacji stron.

paddingmusi być ustawiony na wymagany margines wydruku. W oknie dialogowym drukowania musisz ustawić te same marginesy (w tym przykładzie 10 mm).

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

Rozmiar strony A4 wynosi 210 mm x 297 mm. Musisz odjąć marginesy wydruku od rozmiaru. I ustaw rozmiar zawartości strony:

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

Używam 276 mm zamiast 277 mm, ponieważ różne przeglądarki skalują strony nieco inaczej. Dlatego niektóre z nich wydrukują zawartość o wysokości 277 mm na dwóch stronach. Druga strona będzie pusta. Bardziej bezpieczne jest używanie 276 mm.

Nie potrzebujemy każdy margin, border, padding, backgroundna zadrukowanej stronie, więc je usunąć:

@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 źródłem transformacji jest 0 0! Również zawartość stron poziomych należy przesunąć o 276 mm w dół!

Również jeśli masz połączenie stron portretowych i lanscape, IE pominie strony. Naprawiamy to, ustawiając wartość -ms-zoom1.665. Jeśli ustawisz go na 1.6666 lub coś w tym stylu, prawy brzeg treści strony może być czasami przycięty.

Jeśli potrzebujesz IE8- lub innych starych przeglądarek obsługuje można użyć -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3). Ale w przypadku wystarczająco nowoczesnych przeglądarek nie jest to wymagane.

Oto strona testowa:

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

Cytat z CSS-Discuss Wiki

Reguła @page została zmniejszona z CSS2 do CSS2.1. Pełna reguła @strona CSS2 została podobno zaimplementowana tylko w Operze (i nawet wtedy błędnie). Moje własne testy pokazują, że IE i Firefox w ogóle nie obsługują strony @. Według przestarzałej sekcji specyfikacji CSS2 13.2.2 możliwe jest zastąpienie ustawienia orientacji przez użytkownika i (na przykład) wymuszonego drukowania w trybie poziomym, ale odpowiednia właściwość „size” została usunięta z CSS2.1, co jest zgodne z faktem że żadna bieżąca przeglądarka go nie obsługuje. Został przywrócony w module CSS3 Paged Media, ale należy pamiętać, że jest to tylko wersja robocza (na lipiec 2009 r.).

Wniosek: zapomnij o @page dla teraźniejszości. Jeśli uważasz, że twój dokument wymaga wydrukowania w orientacji poziomej, zadaj sobie pytanie, czy zamiast tego możesz uczynić swój projekt bardziej płynnym. Jeśli naprawdę nie możesz (być może dlatego, że dokument zawiera na przykład tabele danych z wieloma kolumnami), musisz doradzić użytkownikowi ustawienie orientacji poziomej i być może naszkicować, jak to zrobić w najpopularniejszych przeglądarkach. Oczywiście niektóre przeglądarki mają funkcję drukowania dopasowaną do szerokości (kurczącą się) (np. Opera, Firefox, IE7), ale odradza się poleganie na tym, że użytkownicy mają tę funkcję lub ją włączają.

Spróbuj dodać to do swojego CSS:

@page {
  size: landscape;
}

Jak sizewspomniano, właściwość jest tym, czego szukasz. Aby ustawić zarówno orientację, jak i rozmiar strony podczas drukowania, możesz użyć następujących opcji:

/* 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 @strona .

Być może będziesz mógł użyć reguły CSS 2 @page, która pozwala ustawić właściwość „rozmiar” na poziomą .

Możesz także użyć niestandardowego trybu zapisu atrybutów css tylko dla IE

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

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

nie działa w przeglądarce Firefox 16.0.2, ale działa w przeglądarce Chrome

Utworzyłem pusty dokument MS z ustawieniem Krajobraz, a następnie otworzyłem go w notatniku. Skopiowałem i wkleiłem następujące elementy na mojej stronie 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. Wygląda na to, że działa dobrze na IE i Chrome, nie testowano na FF.

Próbowałem rozwiązać ten problem raz, ale wszystkie moje badania doprowadziły mnie do formantów ActiveX / wtyczek. Nie ma sztuczki, że przeglądarki (w każdym razie 3 lata temu) pozwoliły zmienić dowolne ustawienia drukowania (liczbę kopii, rozmiar papieru).

Starałem się ostrzec użytkownika, że ​​musi wybrać opcję „pozioma”, gdy pojawi się okno dialogowe drukowania przeglądarki. Stworzyłem także stronę „podgląd wydruku”, która działała znacznie lepiej niż IE6! Nasza aplikacja zawierała bardzo szerokie tabele danych w niektórych raportach, a podgląd wydruku wyjaśnił użytkownikom, kiedy tabela wyleje się z prawej krawędzi papieru (ponieważ IE6 nie radził sobie również z drukowaniem na 2 arkuszach).

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

<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 zastosować ten styl do tabeli, utwórz jeden znacznik div z tą klasą stylu i dodaj znacznik table do tego znacznika div i zamknij znacznik div na końcu.

Ta tabela będzie drukowana tylko w orientacji poziomej, a wszystkie inne strony będą drukowane tylko w trybie pionowym. Problem polega jednak na tym, że jeśli rozmiar tabeli jest większy niż szerokość strony, możemy stracić niektóre wiersze, a czasem nagłówki również zostaną pominięte. Bądź ostrożny.

Miłego dnia.

Dziękuję, Naveen Mettapally.

Wypróbowałem odpowiedź Denisa i napotkałem problemy (strony portretowe nie wydrukowały się poprawnie po przejściu po stronach poziomych), więc oto moje rozwiązanie:

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>

To również działało dla mnie:

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

Jeśli chcesz zobaczyć poziomo na ekranie przed drukowaniem, a także podczas drukowania, to w swoim css możesz ustawić szerokość na 900px, a wysokość na 612px.

OP nie wspomniało o rozmiarze A4. Zakładam, że w moich liczbach powyżej jest to rozmiar Letter.

Możesz spróbować:

@page {
    size: auto
}