page - html title attribute style

Impresión horizontal desde HTML

Question

Tengo un informe HTML, que debe imprimirse horizontalmente debido a las muchas columnas. ¿Hay una manera de hacerlo, sin que el usuario tenga que cambiar la configuración del documento?

Y cuáles son las opciones entre los navegadores.

Answer 1

Citado de CSS-Discuss Wiki

La regla @page se ha reducido en el alcance de CSS2 a CSS2.1. Según se informa, la regla @ page de CSS2 se implementó solo en Opera (y con errores incluso en ese momento). Mis propias pruebas muestran que IE y Firefox no son compatibles con @page en absoluto. De acuerdo con la sección de especificaciones de CSS2 ahora obsolescente 13.2.2, es posible anular la configuración de orientación del usuario y (por ejemplo) forzar la impresión en paisaje, pero la propiedad de "tamaño" relevante se ha eliminado de CSS2.1, en concordancia con el hecho Que ningún navegador actual lo soporta. Se ha restablecido en el módulo CSS3 Paged Media, pero tenga en cuenta que esto es solo un borrador de trabajo (en julio de 2009).

Conclusión: olvídate de @page para el presente. Si cree que su documento debe imprimirse en orientación horizontal, pregúntese si puede hacer que su diseño sea más fluido. Si realmente no puede (tal vez porque el documento contiene tablas de datos con muchas columnas, por ejemplo), deberá recomendar al usuario que establezca la orientación en Horizontal y quizás describa cómo hacerlo en los navegadores más comunes. Por supuesto, algunos navegadores tienen una función de ajuste a ancho de impresión (ajuste a ajuste) (p. Ej., Opera, Firefox, IE7) pero no es recomendable confiar en que los usuarios tengan esta facilidad o la tengan activada.

Answer 2

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.

Answer 3

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 la especificación CSS 2.1, sin embargo, este size no es tan resaltado por la respuesta a la pregunta ¿Está obsoleta la página {tamaño: paisaje} obsoleta? :

CSS 2.1 ya no especifica el atributo de tamaño. El borrador de trabajo actual para el módulo CSS3 Paged Media sí lo especifica (pero esto no es estándar ni aceptado).

Como se indicó, la opción de tamaño proviene de la especificación del borrador de CSS 3 . En teoría, se puede configurar 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 que se inició en Firefox , la mayoría de los navegadores no lo admiten.

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 preliminar (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 seleccione 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ía 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.

Answer 4

Es posible que pueda usar la regla @ page de CSS 2 que le permite establecer la propiedad ''tamaño'' en horizontal .

Answer 5

Esto también funcionó para mí:

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

Answer 6

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 "paisaje" cuando apareció el diálogo de impresión del navegador. También creé una página de "vista previa de impresión", 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).

Y sí, la gente sigue utilizando IE6 incluso ahora.

Answer 7

Intenta agregar este tu CSS:

@page {
size: landscape;
}

Answer 8

La propiedad de size es lo que buscas 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 documentación de @page .

Answer 9

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

Answer 10

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

Primero establezca el margin cuerpo en 0, porque de lo contrario los márgenes de la página serán más grandes que los establecidos en el cuadro de diálogo de impresión. También establece el color de background para visualizar las páginas.

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

Se requieren margin , border y background para visualizar las páginas.

padding debe ajustarse al 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 210mm x 297mm. 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 distintos navegadores escalan las páginas de forma 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 margin , border , padding , background en la página impresa, así que elimínelos:

@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 de paisaje debe ser movido 276mm hacia abajo!

Además, si tiene una combinación de páginas de retrato y paisaje, IE alejará las páginas. Lo arreglamos ajustando -ms-zoom a 1.665. Si lo configura en 1.6666 o algo así, el borde derecho del contenido de la página puede recortarse a veces.

Si necesita compatibilidad con IE8 u otros navegadores antiguos, puede usar -webkit-transform , -moz-transform , filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3) . Pero para los navegadores modernos no es necesario.

Answer 11

También puede utilizar el writing-mode atributo css no estándar de IE solamente

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

Answer 12

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

Tenga un buen día.

Gracias, Naveen Mettapally.

Answer 13

-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