Impression de paysage à partir de HTML

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.

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.

Ma solution:

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

Cela fonctionne dans IE, FirefoxetChrome

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>

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.

Essayez d'ajouter ceci votre CSS:

@page {
  size: landscape;
}

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 .

Vous pourrez peut-être utiliser la règle CSS 2 @page qui vous permet de définir la propriété 'size' sur paysage .

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

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

-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

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.

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.

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

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>

Cela a également fonctionné pour moi:

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

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.

Vous pouvez essayer ce qui suit:

@page {
    size: auto
}