Impresión horizontal desde HTML
https://stackoverflow.com/questions/138422
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Tengo un informe HTML, que debe imprimirse horizontalmente debido a las muchas columnas. ¿Existe una forma de hacerlo sin que el usuario tenga que cambiar la configuración del documento?
Y cuáles son las opciones entre los navegadores.
Solución
En su CSS puede establecer la propiedad @page como se muestra a continuación.
@media print{@page {size: landscape}}
La página @ es parte de especificación de CSS 2.1 sin embargo este tamaño no es tan resaltado por la respuesta a la pregunta Is @Page {size : paisaje} obsoleto? :
CSS 2.1 ya no especifica el atributo de tamaño. El trabajo actual borrador para el módulo CSS3 Paged Media sí lo especifica (pero esto no es estándar o aceptado).
Como se indicó, la opción de tamaño proviene de la Especificación preliminar de CSS 3 . En teoría, se puede establecer tanto en tamaño de página como en orientación, aunque en mi muestra se omite el tamaño.
El soporte está muy mezclado con un informe de error iniciado en Firefox , la mayoría de los navegadores No lo apoyes.
Puede parecer que funciona en IE7, pero esto se debe a que IE7 recordará la última selección de horizontal o vertical de los usuarios en la vista previa de impresión (solo se reinicia el navegador).
Este artículo tiene algunas sugerencias para el uso de JavaScript o ActiveX que envían claves al navegador de los usuarios, aunque no son ideales y se basan en cambiar la configuración de seguridad de los navegadores.
Alternativamente, puedes rotar el contenido en lugar de la orientación de la página. Esto se puede hacer creando un estilo y aplicándolo al cuerpo que incluye estas dos líneas, pero esto también tiene inconvenientes que crean muchos problemas de alineación y diseño.
<style type="text/css" media="print">
.page
{
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
La alternativa final que he encontrado es crear una versión horizontal en un PDF. Puede apuntar a que cuando el usuario selecciona imprimir imprima el PDF. Sin embargo, no pude hacer esto para imprimir automáticamente el trabajo en IE7.
<link media="print" rel="Alternate" href="print.pdf">
En conclusión, en algunos navegadores es relativamente fácil usar la opción de tamaño de página, sin embargo, en muchos navegadores no existe una forma segura y dependerá de su contenido y entorno. Esto tal vez la razón por la que Google Documents crea un PDF cuando se selecciona imprimir y luego permite que el usuario lo abra e imprima.
Otros consejos
Mi solución:
<style type="text/css" media="print">
@page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>
Esto funciona en IE , Firefox y Chrome
Citado de Wiki de discusión de CSS
La regla @page se ha reducido en alcance de CSS2 a CSS2.1. El lleno Se informó que la regla @ page de CSS2 implementado solo en Opera (y buggily incluso entonces). Mi propia prueba demuestra que IE y Firefox no son compatibles con @page en todos. Según la ahora obsolescente CSS2 sección de especificaciones 13.2.2 es posible anular el usuario ajuste de orientación y (para ejemplo) fuerza de impresión en paisaje pero el tamaño relevante " " " la propiedad tiene Se ha caído de CSS2.1, consistente con el hecho de que no hay navegador actual lo apoya Ha sido reintegrado en El módulo CSS3 Paged Media, pero tenga en cuenta que esto es sólo un borrador de trabajo (como a julio de 2009).
Conclusión: olvidar sobre @page para el presente. Si tu siente que su documento necesita ser impreso En orientación horizontal, pregúntate. Si en cambio puedes hacer tu diseño. más fluido Si realmente no puedes (quizás porque el documento contiene tablas de datos con muchas columnas, para ejemplo), deberás avisar al usuario para establecer la orientación a Paisaje y tal vez delinear cómo Hazlo en los navegadores más comunes. De Por supuesto, algunos navegadores tienen una impresión característica de ajuste a ancho (encoger a ajustar) (por ejemplo, Opera, Firefox, IE7) pero es No es aconsejable confiar en que los usuarios tengan esta facilidad o habiéndola cambiado en.
Intenta agregar esto a tu CSS:
@page {
size: landscape;
}
Es posible que pueda utilizar la regla de página @ CSS2 que permite Usted debe configurar la propiedad 'size' a landscape .
La propiedad size es lo que está buscando como se mencionó. Para configurar tanto la orientación como el tamaño de su página al imprimir, puede usar lo siguiente:
/* ISO Paper Size */
@page {
size: A4 landscape;
}
/* Size in mm */
@page {
size: 100mm 200mm landscape;
}
/* Size in inches */
@page {
size: 4in 6in landscape;
}
Aquí hay un enlace a la @página de documentación .
No basta con rotar el contenido de la página. Aquí hay un CSS correcto que funciona en la mayoría de los navegadores (Chrome, Firefox, IE9 +).
En primer lugar, establezca margen en 0, porque de lo contrario los márgenes de la página serán más grandes que los que estableció en el cuadro de diálogo de impresión. También configure el color background para visualizar las páginas.
body {
margin: 0;
background: #CCCCCC;
}
margin , border y background para visualizar páginas.
padding debe establecerse en el margen de impresión requerido. En el cuadro de diálogo de impresión, debe establecer los mismos márgenes (10 mm en este ejemplo).
div.portrait, div.landscape {
margin: 10px auto;
padding: 10mm;
border: solid 1px black;
overflow: hidden;
page-break-after: always;
background: white;
}
El tamaño de la página A4 es 210 mm x 297 mm. Es necesario restar los márgenes de impresión del tamaño. Y establece el tamaño del contenido de la página:
div.portrait {
width: 190mm;
height: 276mm;
}
div.landscape {
width: 276mm;
height: 190mm;
}
Utilizo 276 mm en lugar de 277 mm, porque los diferentes navegadores escalan las páginas de manera un poco diferente. Así que algunos de ellos imprimirán contenido de 277 mm de altura en dos páginas. La segunda página estará vacía. Es más seguro usar 276mm.
No necesitamos ningún margen , borde , relleno , fondo en la página impresa, por lo que eliminarlos:
@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;
}
}
¡Tenga en cuenta que el origen de la transformación es 0 0 ! ¡También el contenido de las páginas horizontales se debe mover 276 mm hacia abajo!
También si tiene una combinación de páginas de retrato y paisaje, IE alejará las páginas. Lo arreglamos configurando -ms-zoom en 1.665. Si lo configura en 1.6666 o algo así, el borde derecho del contenido de la página puede recortarse algunas veces.
Si necesita compatibilidad con IE8 u otros navegadores antiguos, puede usar -webkit-transform , -moz-transform , filter: progid: DXImageTransform.Microsoft .Imagen básica (rotación = 3) . Pero para los navegadores modernos no es necesario.
También puede usar el atributo css no estándar de IE modo de escritura
div.page {
writing-mode: tb-rl;
}
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
no funciona en Firefox 16.0.2 pero funciona en Chrome
Intenté resolver este problema una vez, pero toda mi investigación me llevó a los controles / complementos ActiveX. No hay ningún truco que los navegadores (de todos modos hace 3 años) permitieran cambiar cualquier configuración de impresión (número de copias, tamaño del papel).
Puse todo mi empeño en advertir al usuario que necesitaba seleccionar " landscape " Cuando aparecía el diálogo de impresión del navegador. También creé una " vista previa de impresión " página, que funcionó mucho mejor que IE6! Nuestra aplicación tenía tablas de datos muy amplias en algunos informes, y la vista previa de impresión lo dejó claro a los usuarios cuando la tabla se saldría por el borde derecho del papel (ya que IE6 tampoco podía hacer frente a la impresión en 2 hojas). p>
Y sí, las personas siguen utilizando IE6 incluso ahora.
<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 desea que este estilo se aplique a una tabla, cree una etiqueta div con esta clase de estilo y agregue la etiqueta de tabla dentro de esta etiqueta div y cierre la etiqueta div al final.
Esta tabla solo se imprimirá en horizontal y todas las demás páginas se imprimirán solo en modo vertical. Pero el problema es que si el tamaño de la tabla es mayor que el ancho de la página, es posible que perdamos algunas de las filas y que a veces también se omitan los encabezados. Ten cuidado.
Que tengas un buen día.
Gracias, Naveen mettapally.
Creé un documento de MS en blanco con la configuración horizontal y luego lo abrí en el bloc de notas. Copié y pegué lo siguiente en mi página 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>
La vista previa de impresión muestra las páginas en un tamaño de paisaje. Esto parece estar funcionando bien en IE y Chrome, no probado en FF.
Esto también me funcionó:
@media print and (orientation:landscape) { … }
