Querformatdruck aus HTML

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

Und was sind die Optionen unter den Browsern.

In Ihrem CSS können Sie die Eigenschaft @page wie unten gezeigt festlegen.

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

Die @ Seite ist Teil der CSS 2.1-Spezifikation, dies sizewird jedoch nicht durch die Antwort auf die Frage hervorgehoben. Ist @Page {Größe: Landschaft} veraltet?::

CSS 2.1 gibt das Größenattribut nicht mehr an. Der aktuelle Arbeitsentwurf für das CSS3 Paged Media-Modul spezifiziert ihn (dies ist jedoch nicht Standard oder akzeptiert).

Wie bereits erwähnt, stammt die Größenoption aus dem CSS 3-Spezifikationsentwurf . Theoretisch kann sowohl die Seitengröße als auch die Ausrichtung festgelegt werden, obwohl in meinem Beispiel die Größe weggelassen wird.

Die Unterstützung ist sehr gemischt mit einem Fehlerbericht, der in Firefox abgelegt wurde wurde. Die meisten Browser unterstützen ihn nicht.

Es scheint in IE7 zu funktionieren, aber dies liegt daran, dass IE7 die letzte Auswahl von Quer- oder Hochformat in der Druckvorschau des Benutzers speichert (nur der Browser wird neu gestartet).

Dieser Beitrag werden einige Problemumgehungen mit JavaScript oder ActiveX vorgeschlagen, mit denen Schlüssel an den Browser des Benutzers gesendet werden, obwohl diese nicht ideal sind und auf der Änderung der Sicherheitseinstellungen des Browsers beruhen.

Alternativ können Sie den Inhalt anstelle der Seitenausrichtung drehen. Dies kann erreicht werden, indem ein Stil erstellt und auf den Körper angewendet wird, der diese beiden Linien enthält. Dies hat jedoch auch Nachteile, die viele Ausrichtungs- und Layoutprobleme verursachen.

<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, besteht darin, eine Querformatversion in einem PDF zu erstellen. Sie können darauf hinweisen, wenn der Benutzer Drucken auswählt, wird das PDF gedruckt. Ich konnte dies jedoch nicht zum automatischen Drucken in IE7 bringen.

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

Zusammenfassend lässt sich sagen, dass es in einigen Browsern mit der Option @page size relativ einfach ist. In vielen Browsern gibt es jedoch keinen sicheren Weg und dies hängt von Ihrem Inhalt und Ihrer Umgebung ab. Dies ist möglicherweise der Grund, warum Google Dokumente eine PDF-Datei erstellt, wenn Drucken ausgewählt ist, und dem Benutzer dann ermöglicht, diese zu öffnen und zu drucken.

Meine Lösung:

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

Dies funktioniert in IE, FirefoxundChrome

Es reicht nicht aus, nur den Seiteninhalt zu drehen. Hier ist ein richtiges CSS, das in den meisten Browsern (Chrome, Firefox, IE9 +) funktioniert.

Setzen Sie zuerst den Text marginauf 0, da sonst die Seitenränder größer sind als die im Druckdialog festgelegten. Stellen Sie auch die backgroundFarbe ein, um Seiten zu visualisieren.

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

margin, borderundbackground sind verpflichtet , Seiten sichtbar zu machen.

paddingmuss auf den erforderlichen Druckrand eingestellt werden. Im Druckdialog müssen Sie dieselben Ränder festlegen (in diesem Beispiel 10 mm).

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

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

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

Ich verwende 276 mm anstelle von 277 mm, da verschiedene Browser die Seiten etwas unterschiedlich skalieren. Einige von ihnen drucken also Inhalte mit einer Höhe von 277 mm auf zwei Seiten. Die zweite Seite ist leer. Es ist sicherer, 276 mm zu verwenden.

Wir brauchen keine margin, border, padding, backgroundauf der gedruckten Seite, so entfernen Sie 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 von Landschaftsseiten muss um 276 mm nach unten verschoben werden!

Auch wenn Sie eine Mischung aus Hoch- und Querformat-Seiten haben, verkleinert der IE die Seiten. Wir beheben dies, indem wir -ms-zoom1.665 einstellen . Wenn Sie den Wert auf 1,6666 oder ähnliches einstellen, wird der rechte Rand des Seiteninhalts manchmal abgeschnitten.

Wenn Sie brauchen Unterstützung IE8- oder andere alte Browser Sie verwenden können -webkit-transform, -moz-transform,filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3) . Für ausreichend moderne Browser ist dies jedoch nicht erforderlich.

Hier ist eine Testseite:

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

Zitiert aus dem CSS-Discuss Wiki

Die @ page-Regel wurde im Umfang von CSS2 auf CSS2.1 reduziert. Die vollständige CSS2 @ page-Regel wurde Berichten zufolge nur in Opera implementiert (und selbst dann fehlerhaft). Meine eigenen Tests zeigen, dass IE und Firefox @page überhaupt nicht unterstützen. Gemäß der mittlerweile veralteten CSS2-Spezifikation in Abschnitt 13.2.2 ist es möglich, die Einstellung des Benutzers für die Ausrichtung zu überschreiben und (zum Beispiel) das Drucken im Querformat zu erzwingen, aber die entsprechende Eigenschaft "Größe" wurde aus CSS2.1 entfernt, was der Tatsache entspricht dass kein aktueller Browser dies unterstützt. Es wurde im CSS3 Paged Media-Modul wieder eingeführt. Beachten Sie jedoch, dass dies nur ein Arbeitsentwurf ist (Stand Juli 2009).

Fazit: @page vorerst vergessen. Wenn Sie der Meinung sind, dass Ihr Dokument im Querformat gedruckt werden muss, fragen Sie sich, ob Sie stattdessen Ihr Design flüssiger gestalten können. Wenn Sie dies wirklich nicht können (z. B. weil das Dokument beispielsweise Datentabellen mit vielen Spalten enthält), müssen Sie den Benutzer anweisen, die Ausrichtung auf Querformat festzulegen und möglicherweise die Vorgehensweise in den gängigsten Browsern zu erläutern. Natürlich verfügen einige Browser über eine Funktion zum Anpassen der Druckbreite (z. B. Anpassen) (z. B. Opera, Firefox, IE7), aber es ist nicht ratsam, sich darauf zu verlassen, dass Benutzer über diese Funktion verfügen oder sie aktiviert haben.

Versuchen Sie, dies Ihrem CSS hinzuzufügen:

@page {
  size: landscape;
}

Die sizeEigenschaft ist, was Sie wie erwähnt suchen. Sie können Folgendes verwenden, um sowohl die Ausrichtung als auch die Größe Ihrer Seite beim Drucken festzulegen:

/* 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 zur @ page-Dokumentation .

Möglicherweise können Sie die CSS 2 @ page-Regel verwenden , mit der Sie die Eigenschaft 'size' auf Querformat festlegen können .

Sie können auch den nicht standardmäßigen Nur-IE-CSS-Attribut- Schreibmodus verwenden

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

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

funktioniert nicht in Firefox 16.0.2, aber es funktioniert in Chrome

Ich habe ein leeres MS-Dokument mit Querformat erstellt und es dann im Editor geöffnet. Kopierte das Folgende und fügte es in meine HTML-Seite ein

<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 im Querformat. Dies scheint auf IE und Chrome gut zu funktionieren, nicht auf FF getestet.

Ich habe einmal versucht, dieses Problem zu lösen, aber alle meine Nachforschungen haben mich zu ActiveX-Steuerelementen / Plug-Ins geführt. Es gibt keinen Trick, den die Browser (jedenfalls vor 3 Jahren) erlaubt haben, Druckeinstellungen (Anzahl der Kopien, Papiergröße) zu ändern.

Ich habe mich bemüht, den Benutzer sorgfältig zu warnen, dass er "Landschaft" auswählen muss, wenn der Druckdialog des Browsers angezeigt wird. Ich habe auch eine "Druckvorschau" -Seite erstellt, die viel besser funktioniert als die von IE6! Unsere Anwendung hatte in einigen Berichten sehr breite Datentabellen, und die Druckvorschau machte den Benutzern klar, wann die Tabelle vom rechten Rand des Papiers verschüttet werden würde (da IE6 auch das Drucken auf 2 Blatt nicht bewältigen konnte).

Und ja, die Leute benutzen immer noch 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 möchten, dass dieser Stil auf eine Tabelle angewendet wird, erstellen Sie ein div-Tag mit dieser Stilklasse, fügen Sie das Tabellen-Tag in dieses div-Tag ein und schließen Sie das div-Tag am Ende.

Diese Tabelle wird nur im Querformat gedruckt und alle anderen Seiten werden nur im Hochformat gedruckt. Das Problem ist jedoch, dass wenn die Tabellengröße größer als die Seitenbreite ist, einige der Zeilen verloren gehen und manchmal auch Überschriften fehlen. Achtung.

Haben Sie einen guten Tag.

Vielen Dank, Naveen Mettapally.

Ich habe Denis 'Antwort ausprobiert und einige Probleme festgestellt (Hochformat-Seiten wurden nach dem Durchsuchen von Querformat-Seiten nicht richtig gedruckt). Hier ist meine Lösung:

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>

Das hat auch bei mir funktioniert:

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

Wenn Sie vor dem Drucken Querformat auf dem Bildschirm anzeigen und drucken möchten, können Sie in Ihrem CSS die Breite auf 900 Pixel und die Höhe auf 612 Pixel einstellen.

OP erwähnte die Größe A4 nicht. Ich nehme an, es ist die Buchstabengröße in meinen Zahlen oben.

Sie können Folgendes versuchen:

@page {
    size: auto
}