Impresión horizontal desde HTML

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

¿Y cuáles son las opciones entre los navegadores?

En su CSS, puede establecer la propiedad @page como se muestra a continuación.

@media print{@page {size: landscape}}

La @page es parte de la especificación CSS 2.1, sin embargo, esto sizeno está tan resaltado por la respuesta a la pregunta ¿Es obsoleta la @Page {size: landscape}? :

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

Como se indicó, la opción de tamaño proviene de la especificación borrador 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 que comienza archivado 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 paisaje o retrato de los usuarios en la vista previa de impresión (solo se reinicia el navegador).

Este artículo tiene algunas soluciones sugeridas usando JavaScript o ActiveX que envían claves al navegador de los usuarios, aunque no son ideales y dependen de cambiar la configuración de seguridad de los navegadores.

Alternativamente, puede 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 última alternativa que he encontrado es crear una versión horizontal en un PDF. Puede señalarlo cuando el usuario seleccione imprimir, imprime el PDF. Sin embargo, no pude hacer que esto imprimiera automáticamente 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 hay una forma segura y dependerá de su contenido y entorno. Quizás por eso Google Documents crea un PDF cuando se selecciona imprimir y luego permite al usuario abrirlo e imprimirlo.

Mi solución:

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

Esto funciona en IE , FirefoxyChrome

No es suficiente solo 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 configure el cuerpo marginen 0, porque de lo contrario los márgenes de la página serán mayores que los que configuró en el cuadro de diálogo de impresión. También configure el backgroundcolor para visualizar páginas.

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

margin, borderY backgroundson necesarios para visualizar páginas.

paddingdebe 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 de 210 mm x 297 mm. Debe restar los márgenes de impresión del tamaño. Y establezca 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 forma un poco diferente. Entonces, 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 276 mm.

No necesitamos ninguna margin, border, padding, backgrounden la página impresa, por lo 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 debe moverse 276 mm hacia abajo!

Además, si tiene una combinación de páginas de retratos y paisajes, IE reducirá las páginas. Lo arreglamos configurando -ms-zooma 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 IE8- u otros navegadores antiguos apoyo que puede utilizar -webkit-transform, -moz-transform,filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3) . Pero para navegadores lo suficientemente modernos no es necesario.

Aquí hay una página de prueba:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
      ...Copy all styles here...
    </style>
  </head>
  <body>
    <div class="portrait">A portrait page</div>
    <div class="landscape">A landscape page</div>
  </body>
</html>

Citado de CSS-Discuss Wiki

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

Conclusión: olvídate de @page por el momento. 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á aconsejar al usuario que configure la orientación en horizontal y tal vez describa cómo hacerlo en los navegadores más comunes. Por supuesto, algunos navegadores tienen una función de impresión que se ajusta al ancho (encogirse para ajustarse) (por ejemplo, Opera, Firefox, IE7), pero no es aconsejable confiar en que los usuarios tengan esta instalación o la tengan activada.

Intenta agregar esto a tu CSS:

@page {
  size: landscape;
}

La sizepropiedad es lo que buscas como se mencionó. Para configurar la orientación y 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 .

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

También puede usar el modo de escritura de atributo css no estándar solo de IE

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

Creé un documento 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 tamaño horizontal. Esto parece estar funcionando bien en IE y Chrome, no probado en FF.

Traté de resolver este problema una vez, pero toda mi investigación me llevó a los controles / complementos de ActiveX. No hay ningún truco para que los navegadores (de todos modos, hace 3 años) permitieran cambiar la configuración de impresión (número de copias, tamaño de papel).

Puse mis esfuerzos en advertir al usuario cuidadosamente que necesitaban seleccionar "paisaje" cuando aparecía el cuadro de diálogo de impresión del navegador. ¡También creé una página de "vista previa de impresión", que funcionó mucho mejor que la de IE6! Nuestra aplicación tenía tablas de datos muy amplias en algunos informes, y la vista previa de la impresión dejó en claro a los usuarios cuándo la tabla se derramaría del borde derecho del papel (ya que IE6 tampoco podía hacer frente a la impresión en 2 hojas).

Y sí, la gente todavía usa 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, entonces podemos perder algunas de las filas y, a veces, también se pierden los encabezados. Ten cuidado.

Tenga un buen día.

Gracias, Naveen Mettapally.

Intenté la respuesta de Denis y encontré algunos problemas (las páginas verticales no se imprimieron correctamente después de las páginas horizontales), así que aquí está mi solución:

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

div.page {
  margin: 10px auto;
  border: solid 1px black;
  display: block;
  page-break-after: always;
  width: 209mm;
  height: 296mm;
  overflow: hidden;
  background: white;
}

div.landscape-parent {
  width: 296mm;
  height: 209mm;
}

div.landscape {
  width: 296mm;
  height: 209mm;
}

div.content {
  padding: 10mm;
}

body,
div,
td {
  font-size: 13px;
  font-family: Verdana;
}

@media print {
  body {
    background: none;
  }
  div.page {
    width: 209mm;
    height: 296mm;
  }
  div.landscape {
    transform: rotate(270deg) translate(-296mm, 0);
    transform-origin: 0 0;
  }
  div.portrait,
  div.landscape,
  div.page {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }
}

<div class="page">
  <div class="content">
    First page in Portrait mode
  </div>
</div>
<div class="page landscape-parent">
  <div class="landscape">
    <div class="content">
      Second page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
    </div>
  </div>
</div>
<div class="page">
  <div class="content">
    Third page in Portrait mode
  </div>
</div>

Esto también funcionó para mí:

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

Si desea ver el paisaje en la pantalla antes de imprimir, además de imprimir, en su CSS, puede establecer el ancho en 900 px y la altura en 612 px.

OP no mencionó el tamaño A4. Supongo que es el tamaño de letra en mis números anteriores.

Puedes probar lo siguiente:

@page {
    size: auto
}