Landschaft Drucken von HTML

Question

Ich habe einen HTML-Bericht, die Landschaft wegen der vielen Spalten gedruckt werden muss. Es gibt eine Möglichkeit, dies zu tun, ohne dass der Benutzer die Dokumenteinstellungen ändern?

Und was sind die Optionen unter Browsern.

Answer 1

In der CSS können Sie die @ Page-Eigenschaft wie unten gezeigt.

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

Die @page ist Teil der CSS 2.1-Spezifikation jedoch diese size ist nicht wie die Antwort auf die Frage hervorgehoben @Page {size: landscape} veraltet :

  

CSS 2.1 nicht mehr gibt die Größe Attribut. Das aktuelle Arbeits   Entwurf für CSS3 Paged Medienmodul tut es geben (aber das ist nicht   Standard oder akzeptiert).

Wie bereits erwähnt die Größe Option aus dem CSS 3 Draft Specification . In der Theorie kann es sowohl zu einer Seitengröße und Ausrichtung gesetzt werden, obwohl in meiner Probe der Größe weggelassen wird.

Die Unterstützung ist sehr gemischt mit einem Bugreport in firefox , die meisten Browser abgelegt beginnen nicht unterstützen es.

Es scheint in IE7 zu arbeiten, aber das ist, weil IE7 den Benutzer letzte Auswahl von Quer- oder Hochformat in der Druckvorschau erinnern wird (nur der Browser neu gestartet wird).

Dieser Artikel hat einige vorgeschlagene Workarounds mit JavaScript oder ActiveX, die Schlüssel für den Benutzer-Browser, obwohl es sie nicht ideal sind und sich auf das Ändern der Browser-Sicherheitseinstellungen senden.

Alternativ können Sie den Inhalt drehen, anstatt die Seitenausrichtung. Dies kann durch die Schaffung einer Art und Anwendung auf dem Körper, der folgendes beinhaltet diese beiden Zeilen durchgeführt werden, aber dies hat auch den Rücken ziehen viele Ausrichtung und Layout-Probleme zu schaffen.

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

Die letzte Alternative, die ich gefunden habe, ist eine Landschaft Version in PDF zu erstellen. Sie können so zeigen, wenn der Benutzer drucken wählt er die PDF druckt. Allerdings konnte ich das nicht bekommen, um automatisches Drucken Arbeit in IE7.

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

Abschließend in einigen Browsern ist es einfach, die Relativität @page Größe Option jedoch in vielen Browsern gibt es keinen sicheren Weg, und es würde auf Ihre Inhalte und Umwelt abhängen. Dies vielleicht, warum Google Dokumente eine PDF erstellt, wenn Druck ausgewählt und dann ermöglicht es dem Benutzer, dass zu öffnen und drucken.

Answer 2

Meine Lösung:

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

Das funktioniert in IE, Firefox und Chrome

Answer 3

Zitat von CSS-Discuss Wiki

  

Die @ page-Regel wurde abgeholzt in   Umfang von CSS2 zu CSS2.1. der vollständige   CSS2 @ page-Regel war wie verlautet   nur in Opera (und buggily umgesetzt   sogar dann). Meine eigenen Tests zeigen, dass   IE und Firefox unterstützen nicht @page bei   alle. Nach dem jetzt obsolescent   CSS2-Spezifikation Abschnitt 13.2.2 es ist   möglich, den Benutzer zu überschreiben   Einstellung der Orientierung und (für   Beispiel) Kraft Druck in Landschaft   aber die entsprechende „Größe“ Eigenschaft hat   wurde von CSS2.1 gesunken, im Einklang   mit der Tatsache, dass kein aktueller Browser   sie unterstützt. Es wurde wieder in   der CSS3 Paged Medienmodul aber beachte   dass dies nur ein Working Draft (als   im Juli 2009).

     

Fazit: vergessen   über @page für die Gegenwart. Wenn du   fühlen Sie das Dokument gedruckt werden muss   im Querformat, fragen Sie sich   wenn Sie stattdessen Ihr Design machen   mehr Flüssigkeit. Wenn es wirklich nicht anders   (Vielleicht, weil das Dokument enthält   Datentabellen mit vielen Spalten, für   Beispiel), müssen Sie die beraten   Benutzer zur Einstellung der Orientierung   Landschaft und vielleicht skizzieren, wie man   tut es in den gängigsten Browsern. Von   Natürlich haben einige Browser einen Druck   passen zu Breite (shrink-to-fit) Feature   (Zum Beispiel Opera, Firefox, IE7) aber es ist   nicht ratsam auf Benutzer angewiesen zu sein   Diese Einrichtung ist oder sie eingeschaltet   auf.

Answer 4

Versuchen Sie, diese CSS hinzuzufügen:

@page {
  size: landscape;
}

Answer 5

Sie könnten in der Lage sein, das CSS 2 @ page-Regel zu verwenden, die erlaubt Sie ‚size‘ Eigenschaft auf Landschaft setzen.

Answer 6

Die size Eigenschaft ist, was Sie wie erwähnt sind. So legen sowohl die die Ausrichtung und die Größe Ihrer Seite beim Drucken, könnten Sie wie folgt vor:

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

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

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

Hier ist ein Link auf die @page Dokumentation .

Answer 7

Es ist einfach nicht genug, um den Seiteninhalt zu drehen. Hier ist eine richtige CSS, die in den meisten Browsern (Chrome, Firefox, Internet Explorer 9 +).

Erster Körper margin auf 0 gesetzt, weil sonst die Seitenränder größer sein als die, die Sie im Druckdialog eingestellt. Auch setzt background Farbe sichtbar zu machen Seiten.

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

margin, border und background benötigen Seiten sichtbar zu machen.

padding muss auf den erforderlichen Druckrand eingestellt werden. Im Druckdialog Sie müssen die gleichen Margen (10 mm in diesem Beispiel) gesetzt.

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

Die Größe von A4-Seite ist 210mm x 297mm. Sie müssen Druckränder von der Größe subtrahieren. Und legen Sie die Größe des Seiteninhalts:

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

Ich verwende 276mm statt 277mm, weil verschiedene Browser-Seiten ein wenig anders skalieren. So werden einige von ihnen 277mm Höhe Inhalt auf zwei Seiten gedruckt werden. Die zweite Seite leer. Es ist sicherer 276mm zu verwenden.

Wir brauchen keine margin, border, padding, background auf der gedruckten Seite, so entfernen sie:

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

Beachten Sie, dass der Ursprung der Transformation ist 0 0! Auch der Inhalt der Landschafts Seiten müssen nach unten bewegt 276mm werden!

Auch wenn Sie eine Mischung aus Hoch- und lanscape Seiten haben IE werden die Seiten verkleinern. Wir reparieren es durch -ms-zoom auf 1.665 einstellen. Wenn Sie es zu 1,6666 oder so etwas wie dies dem rechten Rande des Seiteninhaltes abgeschnitten werden kann manchmal eingestellt werden.

Wenn Sie IE8- oder anderen alten Browser benötigen Unterstützung können Sie verwenden -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3). Aber für modern genug Browser ist es nicht erforderlich.

Answer 8

Sie können auch das Nicht-Standard-IE-only-Attribut CSS verwenden

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

funktioniert nicht in Firefox Live 16.0.2 aber es funktioniert in Chrome

Ich habe versucht, dieses Problem sofort zu lösen, aber alles meine Forschung führte mich zu ActiveX-Steuerelemente / Plug-In. Es gibt keinen Trick, der der Browser (vor 3 Jahren sowieso) erlaubte keine Druckeinstellungen (Anzahl der Kopien, das Papierformat) zu ändern.

habe ich meine Bemühungen in den Benutzer sorgfältig Warnung, dass sie brauchten „Landschaft“ zu wählen, wenn die Browser-Druckdialog erscheint. Ich habe auch eine „Druckvorschau“ Seite, die viel besser gearbeitet als IE6 ist getan! Unsere Anwendung hatte sehr große Tabellen von Daten in einigen Berichten, und die Druckvorschau machte ihm die Benutzer klar, wenn die Tabelle den rechten Rand des Papiers verschütten off würde (da IE6 mit dem Druck auf 2 Blatt bewältigen könnte nicht entweder).

Und ja, sind die Menschen immer noch auch jetzt mit IE6.

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

Wenn Sie diesen Stil auf eine Tabelle angewandt werden dann mit diesem Stil Klasse einen div-Tag erstellen und die Tabelle Tag in diesem div-Tag hinzufügen und den div-Tag am Ende schließen.

Diese Tabelle wird nur in der Landschaft drucken und alle anderen Seiten nur im Hochformat gedruckt werden. Aber das Problem ist, wenn die Tabellengröße mehr als die Seitenbreite ist dann können wir einige Zeilen verlieren und manchmal Header werden auch verpasst. Seien Sie vorsichtig.

Hat

einen guten Tag.

Danke, Naveen Mettapally.

habe ich eine leere MS-Dokument mit Landschaft Einstellung und dann öffnete sie im Notizblock. Kopiert und die folgenden auf meine HTML-Seite

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

Die Druckvorschau zeigt die Seiten in einer Landschaft Größe. Dies scheint auf IE und Chrome adaequat zu sein, nicht auf FF getestet.

Dies ist auch für mich gearbeitet:

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

Answer 9

Answer 10

Answer 11

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

funktioniert nicht in Firefox Live 16.0.2 aber es funktioniert in Chrome

Answer 12

Ich habe versucht, dieses Problem sofort zu lösen, aber alles meine Forschung führte mich zu ActiveX-Steuerelemente / Plug-In. Es gibt keinen Trick, der der Browser (vor 3 Jahren sowieso) erlaubte keine Druckeinstellungen (Anzahl der Kopien, das Papierformat) zu ändern.

habe ich meine Bemühungen in den Benutzer sorgfältig Warnung, dass sie brauchten „Landschaft“ zu wählen, wenn die Browser-Druckdialog erscheint. Ich habe auch eine „Druckvorschau“ Seite, die viel besser gearbeitet als IE6 ist getan! Unsere Anwendung hatte sehr große Tabellen von Daten in einigen Berichten, und die Druckvorschau machte ihm die Benutzer klar, wenn die Tabelle den rechten Rand des Papiers verschütten off würde (da IE6 mit dem Druck auf 2 Blatt bewältigen könnte nicht entweder).

Und ja, sind die Menschen immer noch auch jetzt mit IE6.

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

Wenn Sie diesen Stil auf eine Tabelle angewandt werden dann mit diesem Stil Klasse einen div-Tag erstellen und die Tabelle Tag in diesem div-Tag hinzufügen und den div-Tag am Ende schließen.

Diese Tabelle wird nur in der Landschaft drucken und alle anderen Seiten nur im Hochformat gedruckt werden. Aber das Problem ist, wenn die Tabellengröße mehr als die Seitenbreite ist dann können wir einige Zeilen verlieren und manchmal Header werden auch verpasst. Seien Sie vorsichtig.

Hat

einen guten Tag.

Danke, Naveen Mettapally.

habe ich eine leere MS-Dokument mit Landschaft Einstellung und dann öffnete sie im Notizblock. Kopiert und die folgenden auf meine HTML-Seite

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

Die Druckvorschau zeigt die Seiten in einer Landschaft Größe. Dies scheint auf IE und Chrome adaequat zu sein, nicht auf FF getestet.

Dies ist auch für mich gearbeitet:

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

Answer 13

Ich habe versucht, dieses Problem sofort zu lösen, aber alles meine Forschung führte mich zu ActiveX-Steuerelemente / Plug-In. Es gibt keinen Trick, der der Browser (vor 3 Jahren sowieso) erlaubte keine Druckeinstellungen (Anzahl der Kopien, das Papierformat) zu ändern.

habe ich meine Bemühungen in den Benutzer sorgfältig Warnung, dass sie brauchten „Landschaft“ zu wählen, wenn die Browser-Druckdialog erscheint. Ich habe auch eine „Druckvorschau“ Seite, die viel besser gearbeitet als IE6 ist getan! Unsere Anwendung hatte sehr große Tabellen von Daten in einigen Berichten, und die Druckvorschau machte ihm die Benutzer klar, wenn die Tabelle den rechten Rand des Papiers verschütten off würde (da IE6 mit dem Druck auf 2 Blatt bewältigen könnte nicht entweder).

Und ja, sind die Menschen immer noch auch jetzt mit IE6.

Answer 14

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

Wenn Sie diesen Stil auf eine Tabelle angewandt werden dann mit diesem Stil Klasse einen div-Tag erstellen und die Tabelle Tag in diesem div-Tag hinzufügen und den div-Tag am Ende schließen.

Diese Tabelle wird nur in der Landschaft drucken und alle anderen Seiten nur im Hochformat gedruckt werden. Aber das Problem ist, wenn die Tabellengröße mehr als die Seitenbreite ist dann können wir einige Zeilen verlieren und manchmal Header werden auch verpasst. Seien Sie vorsichtig.

Hat

einen guten Tag.

Danke, Naveen Mettapally.

Answer 15

habe ich eine leere MS-Dokument mit Landschaft Einstellung und dann öffnete sie im Notizblock. Kopiert und die folgenden auf meine HTML-Seite

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

Die Druckvorschau zeigt die Seiten in einer Landschaft Größe. Dies scheint auf IE und Chrome adaequat zu sein, nicht auf FF getestet.

Answer 16

Dies ist auch für mich gearbeitet:

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

Answer 17

Answer 18