Druk poziomy z HTML


244

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.

Odpowiedzi:


379

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


28
dziwne, że mówi „rozmiar” może być krajobrazem, podczas gdy w rzeczywistości jest to „orientacja”.
Magnus Smith

1
@page sizeNie działa na wszystkich współczesnych przeglądarkach, tylko Firefox. Chrome i Opera ignorują to, o ile widziałem.
Justin808

2
size: landscapeNIE jest częścią CSS2.1, chociaż @pagezasady są. Jest to jednak część CSS3. W celu potwierdzenia spróbuj użyć W3C CSS Validator i wprowadź @page {size: landscape}i porównaj wyniki z „
Profilem

1
Gdy masz div, który zajmuje 100 szerokości lub wysokości strony, obrót nie powoduje, że div zajmuje przestrzeń strony portretowej, ale obrócony zostaje krajobraz krajobrazu. Więc niektóre części div są wtedy poza stroną.
Oliver,

6
@AbeerSul - Szczerze mówiąc, dotyczące CSS, co czyni pracę w IE;)
Tony

27

Moje rozwiązanie:

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

To działa IE, FirefoxiChrome


1
Co jeśli chciałbym, aby niektóre classdiv działało w krajobrazie, a nie całą stronę?
SearchForKnowledge

2
@SearchForKnowledge - to byłaby transformacja css3: rotate (90deg).
ToolmakerSteve

Nie rozumiem, co robię źle, ale psuje całą stronę w chromie. To jest linia, którą skopiowałem z kodu @media print {@stage {size: portrait;} body {writing-mode: tb-rl;}}
X-HuMan

Dla mnie dodanie tylko tego @ page {size: landscape; } Pracuje.
Kumar M

1
W 2018 roku nadal działa świetnie ze standardowymi komponentami WebBrowers. Dzięki.
Ken Bekov

14

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>

Dziękuję bardzo, działa jak urok (używany chrome) ze stronami internetowymi, które składają się z kombinacji trybów poziomego i pionowego.
zcahfg2

Skąd są div.portrait, div.landscape?
zcahfg2

Czy to działało w IE 11 dla kogokolwiek? Wygląda na to, że wszystkie elementy są wyłączone.
mzonerz

1
@mzonerz Właśnie przetestowałem w IE 11, działa dobrze. Na końcu odpowiedzi dodałem testowy HTML. Pamiętaj, że w ustawieniach drukowania należy ustawić marginesy strony na 10 mm. Jeśli potrzebujesz innych marginesów strony, musisz zaktualizować następujące wartości: wypełnienie: 10 mm; szerokość: 190 mm; wysokość: 190 mm;
Denis,

@Denis Dziękuję za twój wysiłek. W rzeczywistości jest to jedyne jak dotąd rozwiązanie, które do mnie zadziałało… fajnie !!, Ludzie, którzy integrują to rozwiązanie w witrynach intranetowych programu SharePoint, mogą potrzebować wyłączyć Ustawienia widoku zgodności.
mzonerz

13

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


4
To jest „CSS-Discuss Wiki”, a nie „Wikipedia”.
jball

12

Spróbuj dodać to do swojego CSS:

@page {
  size: landscape;
}

2
Czy działało to w przypadku dowolnej przeglądarki? W IE8 i Firefox3.5 nie miało to żadnego wpływu na podgląd wydruku.
Daniel Ballinger

Niestety podgląd wydruku nie odpowiada wszystkim właściwościom CSS. Ale powinno to działać we wszystkich obecnych przeglądarkach.
gizmo

Dziękuję za kontynuowanie tego. Wydaje się, że nie działa to również w przypadku rzeczywistego drukowania. Czy coś przeoczyłem? Mój plik testowy jest następujący: (Musiałem przyciąć treść akapitu, aby zmieściła się w polu komentarza) <html> <head> <title> Strona testowania poziomego </title> <style> @Page {size: landscape; } </style> </head> <body> <p> Lorem ipsum dolor sit amet, ... </p> </body> </html>
Daniel Ballinger

Próbowałem każdej kombinacji reguły @Page pokazanej na tej stronie i niektórych z innych stron, a także przykładu w HTML / XHTML: The Definitive Guide, wydanie piąte O'Reilly. Nie udało mi się uruchomić tego w IE8, Firefox 3.6 lub Chrome 7.0.
Paul Keister

Wiem, że to 2012 ... ale ta odpowiedź pomogła mi ... w obsłudze opcji krajobrazowej dla IE8 ... dzięki
Vikram

11

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 .


W przypadku użycia z bootstrap deklaracja ta musi być przechowywana w osobnym .csspliku, w przeciwnym razie, jeśli jest wbudowana, domyślna deklaracja boostrap ( size: a3) będzie miała pierwszeństwo.
caram,


5

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

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

1
To zmienia orientację zawartości strony, ale tak naprawdę nie zmienia układu strony na poziomy. Tzn. Nagłówki i stopki będą nadal dodawane tak, jakby strona była pionowa.
Daniel Ballinger

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


2

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.


1

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.


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


1
Spowoduje to obrócenie zawartości ekranu o 90 stopni, ale wydruk nadal będzie miał format protrait. Naprawdę najgorsze z obu światów, przynajmniej w ie8.
arame3333

1

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>



0

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.


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.