it-swarm.com.de

Querformatdruck aus HTML

Ich habe einen HTML-Bericht, der aufgrund der vielen Spalten quer 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.

222
doekman

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

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

Die @page ist Teil von CSS 2.1-Spezifikation jedoch wird dieses size in der Antwort auf die Frage nicht so hervorgehoben Ist @Page {Größe: Querformat} veraltet? =:

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

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

Die Unterstützung ist sehr gemischt mit einem Fehlerbericht beginnt in Firefox , die meisten Browser unterstützen es nicht.

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

Dieser Artikel enthält einige Lösungsvorschläge für die Verwendung von JavaScript oder ActiveX, mit denen Schlüssel an den Browser des Benutzers gesendet werden, obwohl dies nicht ideal ist und die Sicherheitseinstellungen des Browsers geändert werden müssen.

Alternativ können Sie den Inhalt und nicht die 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 zu vielen Ausrichtungs- und Layoutproblemen führen.

<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 verweisen, wenn der Benutzer "Drucken" auswählt, wird die PDF-Datei gedruckt. Allerdings konnte ich dies nicht in IE7 zum automatischen Drucken bringen.

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

In einigen Browsern ist die Verwendung der Option "Seitengröße" relativ einfach. In vielen Browsern ist dies jedoch nicht sicher und hängt von Ihrem Inhalt und Ihrer Umgebung ab. Dies ist möglicherweise der Grund, warum Google Documents bei Auswahl von Drucken ein PDF) erstellt und dem Benutzer dann ermöglicht, dieses zu öffnen und zu drucken.

353
John

Meine Lösung:

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

Dies funktioniert in IE, Firefox und Chrome

27
Eduardo Cuomo

Zitiert aus CSS-Discuss Wiki

Die @page-Regel wurde von CSS2 auf CSS2.1 eingeschränkt. Die vollständige CSS2 @page-Regel wurde Berichten zufolge nur in Opera (und selbst dann fehlerhaft) implementiert. Meine eigenen Tests haben gezeigt, dass IE und Firefox unterstützen nicht @ Gemäß der inzwischen veralteten CSS2-Spezifikation in Abschnitt 13.2.2 ist es möglich, die Ausrichtungseinstellung des Benutzers zu überschreiben und (zum Beispiel) das Drucken im Querformat zu erzwingen, aber die relevante Eigenschaft "Größe" wurde aus CSS2.1 entfernt. Dies steht im Einklang mit der Tatsache, dass kein aktueller Browser dies unterstützt. Es wurde wieder in das CSS3 Paged Media-Modul aufgenommen, es handelt sich jedoch nur um einen Arbeitsentwurf (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 dies nicht möglich ist (z. B. weil das Dokument Datentabellen mit vielen Spalten enthält), müssen Sie den Benutzer anweisen, die Ausrichtung auf Querformat zu setzen 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 (Verkleinern) (z. B. Opera, Firefox, IE7), es ist jedoch nicht ratsam, sich darauf zu verlassen, dass Benutzer über diese Funktion verfügen oder sie aktiviert haben.

12
Ahmad Alfy

Versuchen Sie dies Ihrem CSS hinzuzufügen:

@page {
  size: landscape;
}
12
gizmo

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

Setzen Sie zuerst body margin auf 0, da ansonsten die Seitenränder größer sind als die, die Sie im Druckdialog festgelegt haben. Legen Sie außerdem die Farbe background fest, um die Seiten anzuzeigen.

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

margin, border und background sind erforderlich, um Seiten anzuzeigen.

padding muss auf den erforderlichen Druckrand eingestellt sein. Im Druckdialog müssen Sie die gleichen Ränder einstellen (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 276mm anstatt 277mm, weil 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. Die Verwendung von 276 mm ist sicherer.

Wir brauchen keine margin, border, padding, background auf der gedruckten Seite, also 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 0 0 Ist! Auch der Inhalt von Seiten im Querformat muss 276 mm nach unten verschoben werden!

Auch wenn Sie eine Mischung aus Portrait- und Landschaftsseiten haben IE verkleinert die Seiten. Wir korrigieren dies, indem wir -ms-zoom Auf 1,665 setzen In diesem Fall kann der rechte Rand des Seiteninhalts manchmal beschnitten werden.

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

8
Denis

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

8
Ian Oxley

Die Eigenschaft size ist genau das, wonach Sie suchen. Um sowohl die Ausrichtung als auch die Größe Ihrer Seite beim Drucken festzulegen, können Sie Folgendes verwenden:

/* 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 zu @ page documentation .

7
robstarbuck

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

div.page    { 
   writing-mode: tb-rl;
}
5
yann.kmm
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

funktioniert nicht in Firefox 16.0.2, aber in Chrome

2
Satheesh

Ich habe ein leeres MS-Dokument mit Landschaftseinstellung erstellt und es dann im Editor geöffnet. Kopierte und fügte das folgende zu meiner 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 gut zu funktionieren auf IE und Chrome, nicht auf FF getestet.

1
Shankar
<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 table-Tag in dieses div-Tag ein und schließen Sie das div-Tag am Ende.

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

Haben Sie einen guten Tag.

Vielen Dank, Naveen Mettapally.

1

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

Ich warne den Benutzer sorgfältig, dass er "Querformat" 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 verfügte in einigen Berichten über sehr breite Datentabellen, und die Druckvorschau machte den Benutzern klar, wann die Tabelle über den rechten Rand des Papiers hinausragen würde (da IE6 auch nicht mit dem Drucken von 2 Blättern fertig werden konnte).

Und ja, die Leute nutzen den IE6 auch jetzt noch.

1
Magnus Smith

Das hat auch bei mir geklappt:

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