Impresión horizontal desde HTML
Tengo un informe HTML que debe imprimirse en formato horizontal debido a la gran cantidad de columnas. ¿Existe 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 configurar la propiedad @page como se muestra a continuación.
@media print{@page {size: landscape}}
@page es parte de la especificación CSS 2.1 , sin embargo, esto sizeno se destaca en la respuesta a la pregunta ¿Está @Page {size:landscape} obsoleto? :
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 del borrador de especificación CSS 3. . En teoría, se puede configurar tanto el tamaño como la orientación de la página, aunque en mi muestra se omite el tamaño.
El soporte es muy variado con un informe de error que comenzó a presentarse 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 del usuario en la vista previa de impresión (solo se reinicia el navegador).
Este artículo tiene algunas soluciones alternativas 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 del navegador.
Como alternativa, 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 incluya 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 encontré es crear una versión horizontal en un PDF. Puede señalar que cuando el usuario seleccione imprimir, imprima el PDF. Sin embargo, no pude hacer que esto funcionara con impresión automática en IE7.
<link media="print" rel="Alternate" href="print.pdf">
En conclusión, en algunos navegadores es relativamente fácil usar la opción @page size; sin embargo, en muchos navegadores no hay una forma segura y dependerá de su contenido y entorno. Quizás esta sea la razón por la que 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>
- Con se
media="print"aplicará solo en Imprimir. - Esto funciona en
IEyFirefoxChrome
