Te sugerimos que pruebes esta solución en un entorno controlado antes de enviarlo a producción, saludos.
Solución:
En su CSS puede configurar 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, esto size no es como se destaca en la respuesta a la pregunta ¿Está obsoleta @Page size:landscape?:
CSS 2.1 ya no especifica el tamaño attribute. 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 preliminar de CSS 3. En teoría, se puede configurar tanto para el tamaño de la página como para la orientación, aunque en mi muestra se omite el tamaño.
El apoyo es muy mixed con un informe de error que comienza a archivarse 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 los usuarios de paisaje o retrato en la vista previa de impresión (solo se reinicia el navegador).
Este artículo tiene algunas soluciones alternativas usando JavaScript o ActiveX que envían keys 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.
La última alternativa que he encontrado es crear una versión apaisada en un PDF. Puede señalar que cuando el usuario selecciona imprimir, imprime el PDF. Sin embargo, no pude hacer que esto funcionara automáticamente en IE7.
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ía de su contenido y entorno. Esta puede ser la razón por la que Documentos de Google crea un PDF cuando se selecciona imprimir y luego permite que el usuario lo abra e imprima.
Mi solución:
esto funciona en IE, Firefox y Chrome
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+).
Cuerpo del primer set margin a 0, porque de lo contrario los márgenes de página serán más grandes que los establecidos en el cuadro de diálogo de impresión. también establecer background color para visualizar páginas.
body
margin: 0;
background: #CCCCCC;
margin, border y background son necesarios para visualizar las 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 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;
Uso 276 mm en lugar de 277 mm, porque los diferentes navegadores escalan las páginas de forma un poco diferente. 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 ninguno 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 horizontales debe moverse 276 mm hacia abajo!
Además, si tiene una combinación de páginas verticales y horizontales, IE reducirá las páginas. Lo arreglamos configurando -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 lo suficientemente modernos no es necesario.
Aquí hay una página de prueba:
A portrait page
A landscape page
Al final de la post puedes encontrar las aclaraciones de otros sys admins, tú de igual forma eres capaz dejar el tuyo si te apetece.