web-dev-qa-db-fra.com

Impression de paysages ou de portraits dans FireFox et IE 8

J'utilise actuellement la dernière version de FireFox et IE8 

Pour changer l'orientation de l'impression, j'ai utilisé 

@page {
  size: portrait;
}

dans mon fichier css. Référence @ page

Bien qu'il prétende que la @page est prise en charge dans les deux navigateurs, elle ne fonctionne plus du tout après les tests, à part Chrome. Je voudrais savoir comment imprimer la page dans différentes orientations dans FireFox/IE8.

javascriptjqueryhtmlcssprinting
10
user1871516

Aucune application ne devrait dépendre de cette fonctionnalité pour fonctionner avec tous les navigateurs, car la norme CSS3 relative à l’orientation de la page pour l’impression est encore en cours d’application dans la plupart des navigateurs.

Pour Google Chrome, cela fonctionne très bien: http://dev.activisual.net/test.html

En fin de compte, la décision de changer les relais d’orientation sur l’utilisateur pendant le processus d’impression (même si cela fonctionne), afin que vous puissiez simplement faire savoir aux utilisateurs qu’ils doivent imprimer la page en mode paysage ou portrait, un moyen d'empêcher les utilisateurs de modifier l'orientation lors de l'impression sur les navigateurs de bureau.

Voici un rapport de bogue pour FF signalé très récemment: https://bugzilla.mozilla.org/show_bug.cgi?id=851441

Vous pouvez lire la réponse acceptée à cette question pour référence: Impression de paysages à partir de HTML

13
jacmkno

Comme le dit la référence MDN:

Vous ne pouvez modifier que les marges, les orphelins, les veuves et les sauts de page de Le document. Les tentatives de modification de toute autre propriété CSS seront Ignorées.

Pour ce qui est de vous fournir un balisage qui réalise ce que vous voulez, ce serait en dehors des limites de ce qui est permis sur SO. En outre, cela pourrait être un peu fastidieux, car vous voulez une version antérieure de IE deux générations pour tenter de fonctionner aussi bien que la génération actuelle de Firefox.

2
Rob

La mise en page est en mode portrait par défaut; pour passer en paysage et voir la différence, essayez ce qui suit.

Le code CSS ci-dessous est supporté depuis la version 19.0, essayez-le, il devrait résoudre votre problème: Pour IE8, vous devez utiliser la directive HTML5 dans votre code HTML.

<!doctype html>

Code css:

@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

C'est bizarre que ça 

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

ne fonctionne pas pour vous avec la dernière version de Firefox car je l’ai testé moi-même et fonctionne bien.

Si vous ne trouvez rien, regardez ici même si ce n'est pas le bon mode portrait (pour l'impression), mais vous aurez peut-être des idées. 

Enfin, si vous êtes désespéré et avez vraiment besoin de trouver un moyen de le faire, vous pouvez toujours prendre une capture d'écran de la page Web avec par exemple html2canvas faire pivoter l'image, puis imprimer l'image au lieu de la page Web ... Ce n’est pas une solution idéale, mais vous évitez ainsi le navigateur.

0
Thanos

J'ai rencontré ce problème il y a un peu de temps en préparant un formulaire simple. 

Chrome semble être le meilleur navigateur pour limiter le contrôle du processus d'impression par les utilisateurs. Cependant, il est toujours limité et Firefox/les autres navigateurs ne supportent pas @page.

Ma solution consistait à ajouter une impression @media à la feuille de style pour "encourager" l'utilisateur à imprimer la page en portrait. La @page est juste pour le chrome. affichage: aucun; sur l'en-tête, la navigation et le pied de page supprime les ajouts indésirables du navigateur (cela ne fonctionne que dans les versions chrome et firefox, c.-à-d. vous ne devez toujours pas sélectionner d'en-tête). J'ai une bordure: 0; sur les champs de saisie, car c’était pour un formulaire ... Enfin, je mets une largeur et une hauteur sur le conteneur div, similaires au format d’un morceau de papier standard de 8,5 x 11. Donc, ça irait bien à la page.

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

}

En fin de compte, l’impression de pages Web dépend toujours beaucoup du navigateur/de l’utilisateur, et il n’ya vraiment pas grand-chose à faire à ce sujet. Faire @media print aide, mais le seul moyen d'obtenir une page imprimée exactement comme vous le souhaitez est de générer une version pdf de la page que l'utilisateur peut exporter.

0
Joe_Maker