Impression de paysage à partir de HTML

ma solution:

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

cela fonctionne dans IE , Firefox et Chrome

Cité de CSS-discutez Wiki

la règle @page a été réduite en portée de CSS2 à CSS2.1. Plein La règle CSS2 @page était mise en œuvre uniquement dans L'Opéra (et buggily même à l'époque). Mes propres tests montrent que IE et Firefox ne supportent pas @page à tout. Selon le désormais obsolètes CSS2 spec section 13.2.2 it is possible de remplacer l'utilisateur réglage de l'orientation et de l' (pour exemple de force impression dans le paysage mais la propriété "taille" pertinente a elle a été retirée de CSS2.1 avec le fait qu'aucun navigateur actuel prend en charge. Elle a été rétablie dans le module multimédia en page CSS3 mais notez que ce n'est qu'un Projet de Travail (comme en juillet 2009).

Conclusion: oublier a propos de @page pour le présent. Si vous sentez votre document doit être imprimé en orientation paysage, posez-vous la question si vous pouvez à la place faire votre conception plus fluide. Si vous ne pouvez vraiment pas (peut-être parce que le document contient des tableaux de données avec de nombreuses colonnes, pour exemple), vous devrez en aviser le l'utilisateur de définir l'orientation à Paysage et peut-être expliquer comment le faire dans les navigateurs les plus courants. De bien sûr, certains navigateurs ont une impression fonction ajustement à la largeur (rétrécissement à ajustement) (par exemple Opera, Firefox, IE7) mais c'est déconseillé de s'appuyer sur les utilisateurs ayant cette facilité ou de le faire commuté sur.

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

essayez d'ajouter ceci votre CSS:

@page {
  size: landscape;
}

vous pouvez également utiliser L'attribut CSS non standard IE-only writing-mode

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

la propriété size est ce que vous cherchez comme mentionné. Pour définir à la fois l'orientation et la taille de votre page lors de l'impression, vous pouvez utiliser ce qui suit:

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

-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

il ne suffit pas de faire tourner le contenu de la page. Voici un CSS droit qui fonctionne dans la plupart des navigateurs (Chrome, Firefox, IE9+).

First set body margin to 0, car autrement les marges de page seront plus grandes que celles que vous avez définies dans la boîte de dialogue d'impression. Aussi mis background couleur pour visualiser les pages.

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

margin , border et background sont nécessaires pour visualiser les pages.

padding doit être réglé sur la nécessaire marge d'impression. Dans la boîte de dialogue imprimer, 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 210mm x 297mm. Vous devez soustraire les marges d'impression de la taille. Et définir la taille du contenu de la page:

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

j'utilise 276mm au lieu de 277mm, parce que les différents navigateurs dimensionnent les pages un peu différemment. Ainsi, certains d'entre eux imprimeront du contenu de 277mm de hauteur sur deux pages. La deuxième page sera vide. Il est plus sûr d'utiliser 276mm.

nous n'en avons pas besoin margin , border , padding , background sur la page imprimée, retirez-les donc:

@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 ! Aussi le contenu de paysage doit être déplacé 276mm!

Aussi, si vous avez un mélange de portrait et paysage pages IE zoomer les pages. Nous réglons cela en mettant -ms-zoom à 1.665. Si vous le mettez à 1.6666 ou quelque chose comme ça, la bordure droite du contenu de la page peut être coupée parfois.

si vous avez besoin de la prise en charge de IE8 - ou d'autres anciens navigateurs, vous pouvez utiliser -webkit-transform , -moz-transform , filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3) . Mais pour les navigateurs assez modernes, il n'est pas nécessaire.

j'ai essayé de résoudre ce problème une fois, mais toutes mes recherches m'a conduit vers les contrôles ActiveX/plugins. Il n'y a pas d'astuce que les navigateurs (il y a 3 ans de toute façon) ont permis de modifier les paramètres d'impression (Nombre de copies, Taille du papier).

j'ai mis mes efforts à avertir l'utilisateur avec soin qu'il devait sélectionner" paysage " lorsque le dialogue d'impression des navigateurs est apparu. J'ai aussi créé une page "print preview", qui fonctionnait bien mieux que les IE6! Notre application a des tableaux de données très larges dans certains rapports, et la prévisualisation de l'impression ont indiqué clairement aux Utilisateurs quand la table allait déborder le bord droit du papier (puisque IE6 ne pouvait pas faire face à l'impression sur 2 feuilles soit).

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

j'ai créé un document MS vierge avec un cadre de paysage, puis je l'ai ouvert dans le bloc-notes. Copié et collé ce qui suit à 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 d'impression montre les pages dans une taille de paysage. Cela semble bien fonctionner sur IE et Chrome, pas testé sur FF.

<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 voulez que ce style soit appliqué à une table, alors créez une balise div avec cette classe de style et ajoutez la balise table dans cette balise div et fermez la balise div à la fin.

Ce tableau n'imprimer en paysage et toutes les autres pages d'impression en mode portrait uniquement. Mais le problème est que si la taille de la table est supérieure à la largeur de la page, alors nous pouvons perdre quelques lignes et parfois les en-têtes sont également manqués. Être prudent.

Avoir une bonne journée.

Merci, Naveen Mettapally.

cela a aussi fonctionné pour moi:

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