Impression de paysage à partir de HTML
J'ai un rapport HTML, qui doit être imprimé paysage à cause des nombreuses colonnes. Y a-t-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.
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 spécification CSS 2.1 mais cette size n'est pas aussi bien mise en évidence par la réponse à la question @Page {size: landscape} est-il obsolète? :
CSS 2.1 ne spécifie plus l'attribut size. Le brouillon actuel du module Médias paginés CSS3 le spécifie (mais cela n'est ni standard ni accepté).
Comme indiqué, l'option de taille provient de CSS 3 Draft Specification . 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 le rapport de bogue commence dans Firefox , la plupart des navigateurs ne le supportent pas.
Cela peut sembler fonctionner dans IE7, mais cela est dû au fait que IE7 se souviendra de la dernière sélection de paysage ou de portrait dans l’aperçu avant impression (seul le navigateur est relancé).
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, 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 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 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.
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-Discuter Wiki
La règle @page a été réduite de CSS2 à CSS2.1. La règle CSS2 @page complète aurait été mise en œuvre uniquement dans Opera (et même à ce moment-là). Mes propres tests montrent que IE et Firefox ne supportent pas du tout @page. Conformément à la section 13.2.2 de la norme 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é "size" correspondante a été supprimée de CSS2.1, ce qui est cohérent avec le fait qu'aucun navigateur actuel ne le supporte. Il a été réintégré dans le module CSS3 Paged Media, mais notez qu'il ne s'agit que d'une version de travail (mise à jour en juillet 2009).
Conclusion: oubliez @page pour le présent. Si vous estimez que votre document doit être imprimé en orientation Paysage, demandez-vous si vous pouvez plutôt rendre votre dessin plus fluide. Si vous ne le pouvez vraiment pas (peut-être parce que le document contient des tableaux de données comportant de nombreuses colonnes, par exemple), vous devrez conseiller à l'utilisateur de définir l'orientation sur Paysage et éventuellement de préciser comment le faire dans les navigateurs les plus courants. Bien sûr, certains navigateurs disposent d’une fonction d’ajustement de la largeur d’impression (par exemple, Opera, Firefox, IE7), mais il est déconseillé de compter sur les utilisateurs disposant de cette fonctionnalité ou sur laquelle elle est activée.
Essayez d'ajouter ceci à votre CSS:
@page {
size: landscape;
}
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 +).
Réglez 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 d’impression. Définissez également background color 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 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 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 pas besoin de margin, border, padding, background sur la page imprimée, supprimez-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! De plus, le contenu des pages de paysage doit être déplacé de 276 mm!
De même, si vous avez un mélange de pages de portrait et de paysage, IE effectuera un zoom arrière sur les pages. Nous corrigeons cela en mettant -ms-zoom à 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 d'anciens navigateurs, 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.
Vous pourrez peut-être utiliser la règle règle CSS 2 @page qui vous permet de définir la propriété propriété 'size' sur paysage .
La propriété size correspond à ce que vous recherchez. 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 @ page documentation .
Vous pouvez également utiliser l'attribut css non-standard en mode IE (uniquement) d'IE
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 dans Chrome
J'ai créé un paramètre MS Document vierge avec Paysage, puis je 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 en format paysage. Cela semble fonctionner correctement sur IE et Chrome, non 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 souhaitez que ce style soit appliqué à une table, créez une balise div avec cette classe de style, ajoutez la balise de 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. Faites attention.
Bonne journée.
Merci, Naveen Mettapally.
J'ai essayé de résoudre ce problème une fois, mais toutes mes recherches m'ont conduit vers des 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 qu'il lui fallait sélectionner "Paysage" lorsque la boîte de dialogue Imprimer des navigateurs est apparue. J'ai également créé une page "Aperçu avant impression" qui fonctionnait beaucoup mieux que celle d'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 à quel moment le tableau allait déborder 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.
Cela a également fonctionné pour moi:
@media print and (orientation:landscape) { … }