it-swarm.com.de

Drucken von Landschaft oder Porträt in FireFox und IE 8

Zur Zeit verwende ich die neueste Version von FireFox und den IE8 

Um die Ausrichtung des Drucks zu ändern, habe ich verwendet 

@page {
  size: portrait;
}

in meiner CSS-Datei. @ page reference

Obwohl behauptet wird, dass die @page in beiden Browsern unterstützt wird, funktioniert sie nach meinen Tests außer Chrome überhaupt nicht. Ich möchte wissen, wie Sie die Seite in FireFox/IE8 in unterschiedlicher Ausrichtung drucken können.

10
user1871516

Keine Anwendung sollte von dieser Funktion abhängen, um jetzt browserübergreifend zu funktionieren, da der CSS3-Standard für die Seitenausrichtung beim Drucken in den meisten Browsern noch implementiert wird.

Für Google Chrome funktioniert das problemlos: http://dev.activisual.net/test.html

Letztendlich die Entscheidung, die Orientierungsrelais für den Benutzer während des Druckvorgangs zu ändern (selbst wenn es funktioniert), so dass Sie die Benutzer einfach wissen lassen können, dass sie die Seite im Quer- oder Hochformat drucken sollen, aber im Allgemeinen wird das nicht so sein So können Sie verhindern, dass Benutzer beim Drucken in Desktop-Browsern die Ausrichtung ändern.

Hier ist ein Fehlerbericht für FF, der kürzlich gemeldet wurde: https://bugzilla.mozilla.org/show_bug.cgi?id=851441

Sie können die akzeptierte Antwort zu dieser Frage als Referenz lesen: Drucken im Querformat aus HTML

13
jacmkno

Wie die MDN-Referenz sagt:

Sie können nur die Ränder, Waisen, Witwen und Seitenumbrüche von Des Dokuments ändern. Versuche, andere CSS-Eigenschaften zu ändern, werden Ignoriert.

Soweit Sie mit Markups versorgt werden, die das erreichen, was Sie möchten, würde dies außerhalb der Grenzen des zulässigen Werts von SO liegen. Darüber hinaus könnte es ein wenig Arbeit sein, da Sie eine zwei Generationen-Version von IE als Firefox der aktuellen Generation suchen.

2
Rob

Das Layout des Seitendrucks ist standardmäßig im Hochformat, um das Querformat zu ändern und den Unterschied zu versuchen, versuchen Sie es mit dem folgenden.

Der folgende CSS-Code wird seit Version 19.0 unterstützt. Versuchen Sie es, es sollte Ihr Problem lösen: Für IE8 sollten Sie die HTML5-Direktive in Ihrer HTML-Datei verwenden

<!doctype html>

Css-Code:

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

Firefox: https://developer.mozilla.org/en-US/docs/Mozilla_CSS_support_chartFirefox support

IE http://msdn.Microsoft.com/en-us/library/hh781508(v=vs.85).aspxenter image description here

1
Mehdi Karamosly

Es ist komisch, dass dies 

{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

funktioniert nicht für Sie für die neueste Version von Firefox, da ich es selbst getestet habe und gut funktioniert.

Wenn Sie nichts finden, schauen Sie nach hier , obwohl dies nicht der richtige Hochformatmodus ist (für den Druck), aber Sie könnten ein paar Ideen bekommen. 

Wenn Sie verzweifelt werden und wirklich einen Weg finden müssen, um dies zu tun, können Sie immer einen Screenshot der Webseite erstellen, beispielsweise mit html2canvas , drehen Sie das Bild und drucken Sie das Bild statt der Webseite ... Keine ideale Lösung, aber so umgehen Sie den Browser.

0
Thanos

Ich bin vor einiger Zeit auf dieses Thema gestoßen, als ich ein einfaches Formular erstellt habe. 

Chrome scheint der beste Browser zu sein, um die Kontrolle des Benutzers über den Druckvorgang einzuschränken. Es ist jedoch immer noch begrenzt und Firefox/andere Browser unterstützen @page nicht.

Meine Lösung bestand darin, dem Stylesheet einen @media-Druck hinzuzufügen, um den Benutzer zu "ermutigen", die Seite im Hochformat zu drucken. Die @page ist nur für Chrom. Anzeige: keine; Im Header, Nav und Footer werden unerwünschte Browser-Ergänzungen entfernt (dies funktioniert nur in Chrome und Firefox, dh Sie müssen noch keine Header auswählen). Ich habe einen Rahmen: 0; in Eingabefeldern, weil es sich um ein Formular handelte ... Zum Schluss lege ich eine Breite und Höhe auf den Behälter div, ähnlich der Größe eines 8,5 x 11-Standard-Papiers. Die Seite würde also gut passen.

@media print{
    @page {size: auto; margin: auto;}
    header nav, footer {display: none;}
    input {border: 0px;}
    #container  {width:9.1in; height:10in;}

} 

Letztendlich ist der Druck von Webseiten immer noch sehr stark vom Browser/Benutzer abhängig, und es gibt wirklich nicht viel zu tun. Das Erstellen von @media-Druck hilft zwar, aber die einzige Möglichkeit, die Seite genau so zu drucken, wie Sie es wünschen, wäre die Erzeugung einer PDF-Version der Seite, die der Benutzer exportieren kann.

0
Joe_Maker