Impression de paysage à partir de HTML


244

J'ai un rapport HTML, qui doit être imprimé en paysage à cause des nombreuses colonnes. Existe-t-il un moyen de le faire, sans que l'utilisateur n'ait à modifier les paramètres du document?

Et quelles sont les options parmi les navigateurs.

Réponses:


379

Dans votre CSS, vous pouvez définir la propriété @page comme indiqué ci-dessous.

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

La @page fait partie de la spécification CSS 2.1 mais ce sizen'est pas comme le souligne la réponse à la question @Page {size: landscape} est-il obsolète? :

CSS 2.1 ne spécifie plus l'attribut size. Le brouillon de travail actuel pour le module CSS3 Paged Media le spécifie (mais ce n'est pas standard ou accepté).

Comme indiqué, l'option de taille provient du projet de spécification CSS 3 . En théorie, il peut être défini à la fois sur une taille de page et une orientation bien que dans mon échantillon, la taille soit omise.

Le support est très mitigé avec un rapport de bogue commencé déposé dans firefox , la plupart des navigateurs ne le supportent pas.

Cela peut sembler fonctionner dans IE7, mais c'est parce qu'IE7 se souviendra de la dernière sélection de paysage ou de portrait de l'utilisateur dans l'aperçu avant impression (seul le navigateur est redémarré).

Cet article propose des solutions de contournement utilisant JavaScript ou ActiveX qui envoient des clés au navigateur des utilisateurs, bien qu'elles ne soient pas idéales et reposent sur la modification des paramètres de sécurité des navigateurs.

Alternativement, vous pouvez faire pivoter le contenu plutôt que l'orientation de la page. Cela peut être fait en créant un style et en l'appliquant au corps qui comprend ces deux lignes, mais cela présente également des inconvénients créant de nombreux problèmes d'alignement et de mise en page.

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

La dernière alternative que j'ai trouvée est de créer une version paysage dans un PDF. Vous pouvez indiquer que lorsque l'utilisateur sélectionne imprimer, il imprime le PDF. Cependant, je n'ai pas pu obtenir ceci pour un travail d'impression automatique dans IE7.

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

En conclusion, dans certains navigateurs, il est facile d'utiliser la relativité en utilisant l'option de taille @page, mais dans de nombreux navigateurs, il n'existe aucun moyen sûr et cela dépendra de votre contenu et de votre environnement. C'est peut-être la raison pour laquelle Google Documents crée un PDF lorsque l'impression est sélectionnée, puis permet à l'utilisateur de l'ouvrir et de l'imprimer.


28
bizarre qu'il dise que la "taille" peut être paysage, alors que c'est en fait une "orientation".
Magnus Smith

1
@page sizeNe semble pas fonctionner sur tous les navigateurs modernes, seulement Firefox. Chrome et Opera n'en tiennent pas compte autant que je sache.
Justin808

2
size: landscapene fait PAS partie de CSS2.1, bien que les @pagerègles le soient. Il fait cependant partie de CSS3. Pour confirmation, essayez d'utiliser le validateur CSS W3C et entrez @page {size: landscape}et comparez les résultats avec "Profil" défini au niveau 2.1 par rapport au niveau 3.
daiscog

1
Lorsque vous avez un div qui occupe 100 largeur ou hauteur de la page, la rotation ne fait pas occuper le div de l'espace d'une page portrait, mais un paysage en rotation. Ainsi, certaines parties du div sont alors hors de la page.
Oliver

6
@AbeerSul - Pour être honnête, en ce qui concerne CSS, qu'est - ce qui fonctionne dans IE;)
Tony

27

Ma solution:

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

Cela fonctionne dans IE, FirefoxetChrome


1
Et si je voulais que certaines classdiv soient en paysage et non pas la page entière?
SearchForKnowledge

2
@SearchForKnowledge - ce serait la transformation de CSS3: tourner (90deg).
ToolmakerSteve

Je n'ai pas compris ce que je fais mal, mais cela brise la page entière en chrome. C'est la ligne que j'ai copiée du code @media print {@page {size: portrait;} body {writing-mode: tb-rl;}}
X-HuMan

Pour moi, ajouter uniquement cette @page {size: landscape; } travaux.
Kumar M

1
En 2018, fonctionne toujours très bien avec les composants WebBrowers standard. Merci.
Ken Bekov

14

Il ne suffit pas simplement de faire pivoter le contenu de la page. Voici un bon CSS qui fonctionne dans la plupart des navigateurs (Chrome, Firefox, IE9 +).

Définissez d'abord le corps marginsur 0, sinon les marges de page seront plus grandes que celles que vous avez définies dans la boîte de dialogue d'impression. Définissez également la backgroundcouleur pour visualiser les pages.

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

margin, borderEt backgroundsont nécessaires pour visualiser les pages.

paddingdoit être réglé sur la marge d'impression requise. Dans la boîte de dialogue d'impression, vous devez définir les mêmes marges (10 mm dans cet exemple).

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

La taille de la page A4 est de 210 mm x 297 mm. Vous devez soustraire les marges d'impression de la taille. Et définissez la taille du contenu de la page:

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

J'utilise 276 mm au lieu de 277 mm, car différents navigateurs mettent à l'échelle les pages un peu différemment. Certains imprimeront donc du contenu d'une hauteur de 277 mm sur deux pages. La deuxième page sera vide. Il est plus sûr d'utiliser 276 mm.

Nous n'en avons pas besoin margin , border, padding, backgroundsur la page imprimée, afin de les enlever:

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

Notez que l'origine de la transformation est 0 0! Le contenu des pages paysage doit également être déplacé de 276 mm vers le bas!

De plus, si vous avez un mélange de pages portrait et paysage, IE fera un zoom arrière sur les pages. Nous le -ms-zoomcorrigeons en définissant sur 1.665. Si vous le définissez sur 1,6666 ou quelque chose comme ça, la bordure droite du contenu de la page peut être rognée parfois.

Si vous avez besoin IE8- ou d' autres anciens navigateurs compatibles , vous pouvez utiliser -webkit-transform, -moz-transform,filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3) . Mais pour les navigateurs assez modernes, ce n'est pas nécessaire.

Voici une page de test:

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

Merci beaucoup, fonctionne comme un charme (chrome utilisé) avec les pages Web qui consistent en un mélange de modes paysage et portrait.
zcahfg2

D'où sont div.portrait, div.landscape?
zcahfg2

Est-ce que cela a fonctionné dans IE 11 pour quelqu'un? Il semble que tous les éléments soient éteints.
mzonerz

1
@mzonerz Je viens de tester dans IE 11, cela fonctionne très bien. J'ai ajouté un html de test à la fin de la réponse. Veuillez noter que vous devez définir des marges de page de 10 mm dans les paramètres d'impression. Si vous avez besoin d'une autre marge de page, vous devez mettre à jour les valeurs suivantes: padding: 10mm; largeur: 190 mm; hauteur: 190 mm;
Denis

@Denis Merci pour vos efforts. En fait, c'est la seule solution qui a fonctionné pour moi jusqu'à présent .. bien !!
mzonerz

13

Extrait du Wiki CSS-Discuss

La règle @page a été réduite dans la portée de CSS2 à CSS2.1. La règle CSS2 @page complète n'aurait été implémentée que dans Opera (et même de façon buggée). Mes propres tests montrent qu'IE et Firefox ne prennent pas du tout en charge @page. Selon la section 13.2.2 de la spécification CSS2 désormais obsolète, il est possible de remplacer le paramètre d'orientation de l'utilisateur et (par exemple) de forcer l'impression dans Paysage, mais la propriété "taille" correspondante a été supprimée de CSS2.1, conformément au fait qu'aucun navigateur actuel ne le prend en charge. Il a été réintégré dans le module Médias paginés CSS3, mais notez qu'il ne s'agit que d'un document de travail (en juillet 2009).

Conclusion: oubliez @page pour le moment. Si vous pensez que votre document doit être imprimé en orientation Paysage, demandez-vous si vous pouvez plutôt rendre votre conception plus fluide. Si vous ne le pouvez vraiment pas (peut-être parce que le document contient des tableaux de données avec de nombreuses colonnes, par exemple), vous devrez conseiller à l'utilisateur de définir l'orientation sur Paysage et peut-être expliquer comment le faire dans les navigateurs les plus courants. Bien sûr, certains navigateurs ont une fonction d'impression adaptée à la largeur (rétrécie à la taille) (par exemple, Opera, Firefox, IE7), mais il est déconseillé de compter sur les utilisateurs disposant de cette fonctionnalité ou l'activant.


4
C'est le "CSS-Discuss Wiki", pas "Wikipedia".
jball

12

Essayez d'ajouter ceci votre CSS:

@page {
  size: landscape;
}

2
Est-ce que cela a fonctionné pour vous avec l'un des navigateurs? Avec IE8 et Firefox3.5, cela ne semblait pas faire de différence dans l'aperçu avant impression.
Daniel Ballinger

L'aperçu avant impression ne suit malheureusement pas toutes les propriétés CSS. Mais cela devrait fonctionner dans tous les navigateurs actuels.
gizmo

Merci d'avoir suivi. Cela ne semble pas fonctionner pour moi avec l'impression réelle non plus. Ai-je raté quelque chose? Mon fichier de test est le suivant: (J'ai dû tronquer le contenu du paragraphe pour qu'il tienne dans la zone de commentaire) <html> <head> <title> Page de test du paysage </title> <style> @Page {size: landscape; } </style> </head> <body> <p> Lorem ipsum dolor assis amet, ... </p> </body> </html>
Daniel Ballinger

J'ai essayé toutes les combinaisons de la règle @Page montrée sur cette page et certaines autres sites, ainsi que l'exemple dans O'Reilly's HTML / XHTML: The Definitive Guide, Fifth Edition. Je n'ai pas pu faire fonctionner cela dans IE8, Firefox 3.6 ou Chrome 7.0.
Paul Keister

Je sais que c'est 2012 ... mais cette réponse m'a aidé ... à prendre en charge l'option paysage pour IE8 ... merci
Vikram

11

La sizepropriété est ce que vous recherchez comme mentionné. Pour définir à la fois l'orientation et la taille de votre page lors de l'impression, vous pouvez utiliser les éléments suivants:

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

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

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

Voici un lien vers la documentation @page .


Lorsqu'elle est utilisée avec bootstrap, cette déclaration doit être stockée dans un .cssfichier séparé ou bien si elle est en ligne, la déclaration boostrap par défaut ( size: a3) aura la priorité.
caram


5

Vous pouvez également utiliser le mode d'écriture d' attribut css non standard IE uniquement

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

1
Cela réoriente le contenu de la page mais ne change pas vraiment la mise en page en paysage. C'est-à-dire que les en-têtes et pieds de page seront toujours ajoutés comme si la page était en portrait.
Daniel Ballinger

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

ne fonctionne pas dans Firefox 16.0.2 mais il fonctionne dans Chrome


2

J'ai créé un document MS Document vierge avec paysage, puis l'ai ouvert dans le bloc-notes. Copié et collé ce qui suit sur ma page html

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

L'aperçu avant impression montre les pages au format paysage. Cela semble fonctionner correctement sur IE et Chrome, non testé sur FF.


1

J'ai essayé de résoudre ce problème une fois, mais toutes mes recherches m'ont mené vers des contrôles / plug-ins ActiveX. Il n'y a aucune astuce que les navigateurs (il y a 3 ans en tout cas) ont permis de modifier les paramètres d'impression (nombre de copies, format du papier).

J'ai mis mes efforts pour avertir soigneusement l'utilisateur qu'il devait sélectionner "paysage" lorsque la boîte de dialogue d'impression du navigateur est apparue. J'ai également créé une page "Aperçu avant impression", qui fonctionnait beaucoup mieux que celle d'IE6! Notre application contenait des tableaux de données très larges dans certains rapports, et l'aperçu avant impression indiquait clairement aux utilisateurs quand le tableau déborderait du bord droit du papier (car IE6 ne pouvait pas non plus supporter l'impression sur 2 feuilles).

Et oui, les gens utilisent encore IE6 même maintenant.


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

Si vous souhaitez que ce style soit appliqué à une table, créez une balise div avec cette classe de style et ajoutez la balise de table dans cette balise div et fermez la balise div à la fin.

Ce tableau ne s'imprimera qu'en mode paysage et toutes les autres pages seront imprimées en mode portrait uniquement. Mais le problème est que si la taille du tableau est supérieure à la largeur de la page, nous pouvons perdre certaines lignes et parfois des en-têtes sont également manqués. Faites attention.

Bonne journée.

Merci, Naveen Mettapally.


1
Cela fait pivoter le contenu de l'écran de 90 degrés, mais l'impression sort toujours au format protégé. Le pire des deux mondes vraiment, au moins dans ie8.
arame3333

1

J'ai essayé la réponse de Denis et j'ai rencontré quelques problèmes (les pages portrait ne s'imprimaient pas correctement après avoir consulté les pages paysage), voici donc ma solution:

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>



0

Si vous souhaitez voir le paysage sur l'écran avant d'imprimer, ainsi que l'impression, dans votre CSS, vous pouvez définir la largeur à 900 px et la hauteur à 612 px.

OP n'a pas mentionné le format A4. Je suppose que c'est la taille de la lettre dans mes chiffres ci-dessus.


-1

Vous pouvez essayer ce qui suit:

@page {
    size: auto
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.