Impression de paysage à partir de HTML
https://stackoverflow.com/questions/138422
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'ai un rapport HTML, qui doit être imprimé en paysage à cause des nombreuses colonnes. Y at-il un moyen de le faire sans que l’utilisateur ait à modifier les paramètres du document?
Et quelles sont les options parmi les navigateurs.
La solution
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 , cependant. cette taille ne correspond pas à la réponse à la question Is @Page {size : paysage} obsolète? :
CSS 2.1 ne spécifie plus l'attribut size. Le travail actuel brouillon pour le module CSS3 Paged Media le spécifie (mais ce n’est pas standard ou accepté).
Comme indiqué, l'option de taille provient de la spécification brouillon CSS 3 . En théorie, il est possible de définir une taille et une orientation de page, bien que la taille soit omise dans mon exemple.
Le support est très mélangé avec un rapport de bogue commencé à être classé dans Firefox, la plupart des navigateurs ne le supporte 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 par les utilisateurs dans l'aperçu avant impression (seul le navigateur est relancé).
Cet article propose des solutions de travail 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.
Vous pouvez également 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 inclut ces deux lignes, mais cela présente également des inconvénients, ce qui crée de nombreux problèmes d’alignement et de présentation.
<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 solution que j'ai trouvée consiste à créer une version paysage dans un fichier PDF. Vous pouvez indiquer que lorsque l'utilisateur sélectionne imprimer, il imprime le PDF. Cependant, je ne pouvais pas obtenir cette impression automatique dans IE7.
<link media="print" rel="Alternate" href="print.pdf">
En conclusion, dans certains navigateurs, il est facile de relativiser l’utilisation de l’option @page size. Cependant, dans de nombreux navigateurs, il n’existe aucun moyen sûr et cela dépend de votre contenu et de votre environnement. C’est peut-être pour cette raison que Google Documents crée un PDF lorsque l’impression est sélectionnée, puis permet à l’utilisateur de l’ouvrir et de l’imprimer.
Autres conseils
Ma solution:
<style type="text/css" media="print">
@page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>
Ceci fonctionne dans IE , Firefox et Chrome
Cité sur Wiki de discussion en CSS
La règle @page a été supprimée portée de CSS2 à CSS2.1. Le plein La règle CSS2 @page aurait été implémenté uniquement dans Opera (et buggily même à ce moment là). Mes propres tests montrent que IE et Firefox ne supportent pas @page à tout. Selon le maintenant obsolète Section de spécification CSS2 13.2.2 il est possible de remplacer l'utilisateur réglage de l'orientation et (pour exemple) force l'impression en paysage mais le " taille " pertinent la propriété a été supprimé de CSS2.1, cohérent avec le fait qu'aucun navigateur actuel le soutient. Il a été rétabli dans le module CSS3 Paged Media mais notez que c’est seulement un brouillon de travail (comme à juillet 2009).
Conclusion: oubliez à propos de @page pour le présent. Si vous sentir que votre document doit être imprimé en orientation paysage, demandez-vous si vous pouvez plutôt faire votre design plus fluide. Si vous ne pouvez vraiment pas (peut-être parce que le document contient tables de données avec beaucoup de colonnes, pour exemple), vous devrez conseiller le l'utilisateur pour définir l'orientation à Paysage et peut-être expliquer comment faites-le dans les navigateurs les plus courants. De Bien sûr, certains navigateurs ont une impression ajustement à la largeur (shrink to fit) (par exemple, Opera, Firefox, IE7) mais c’est déconseillé de compter sur les utilisateurs ayant cette installation ou l'avoir changé sur.
Essayez d’ajouter ceci à votre CSS:
@page {
size: landscape;
}
Vous pourrez peut-être utiliser la règle CSS 2 @page qui permet vous devez définir la propriété 'taille' sur paysage .
La propriété size correspond à ce que vous recherchez, comme indiqué. 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 .
Il ne suffit pas 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 margin sur 0, car sinon les marges de la page seront plus grandes que celles que vous avez définies dans la boîte de dialogue Imprimer. Définissez également la couleur background pour visualiser les pages.
body {
margin: 0;
background: #CCCCCC;
}
margin , border et arrière-plan sont requis pour visualiser les pages.
padding doit être défini 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;
}
Le format 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 redimensionnent les pages un peu différemment. Ainsi, certains d'entre eux imprimeront un contenu de 277 mm de hauteur sur deux pages. La deuxième page sera vide. Il est plus sûr d’utiliser 276mm.
Nous n'avons besoin d'aucune marge , bordure , remplissage , arrière-plan sur la page imprimée, afin supprimez-les:
@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 ! De plus, le contenu des pages en mode paysage doit être déplacé de 276 mm vers le bas!
De même, si vous avez un mélange de pages portrait et de paysage, IE effectuera un zoom arrière sur les pages. Nous corrigeons cela en définissant -ms-zoom sur 1.665. Si vous le définissez à 1.6666 ou à quelque chose du genre, le bord droit du contenu de la page peut parfois être recadré.
Si vous avez besoin de la prise en charge d'IE8 ou de tout autre ancien navigateur, vous pouvez utiliser -webkit-transformation , -moz-transform , filtre: variable: DXImageTransform.Microsoft. .BasicImage (rotation = 3) . Mais pour les navigateurs assez modernes, ce n'est pas nécessaire.
Vous pouvez également utiliser l'attribut css non standard d'IE uniquement mode écriture
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 fonctionne sous Chrome
J'ai essayé de résoudre ce problème une fois, mais toutes mes recherches m'ont conduit vers les contrôles / plug-ins ActiveX. Il n’existe aucune astuce permettant aux navigateurs (il y a 3 ans, de toute façon) de modifier les paramètres d’impression (nombre de copies, format du papier).
Je me suis efforcé d'avertir soigneusement l'utilisateur de sélectionner "Paysage". lorsque la boîte de dialogue d'impression des navigateurs est apparue. J'ai également créé un " aperçu avant impression " page, qui fonctionnait beaucoup mieux que IE6! Notre application comportait 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 (IE6 ne pouvant pas non plus imprimer sur deux 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, ajoutez la balise table dans cette balise div et fermez la balise div à la fin.
Ce tableau n’imprimera qu’en mode paysage et toutes les autres pages n’imprimeront qu’en mode portrait. Mais le problème est que si la taille de la table est supérieure à la largeur de la page, nous risquons de perdre certaines lignes et d’oublier parfois des en-têtes. Soyez prudent.
Passez une bonne journée.
Merci Naveen Mettapally.
J'ai créé un paramètre MS Document vierge avec Paysage, puis je l'ai ouvert dans le bloc-notes. Copiez et collez 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 en format paysage. Cela semble fonctionner correctement sur IE et Chrome, non testé sur FF.
Cela a également fonctionné pour moi:
@media print and (orientation:landscape) { … }
