Impressão em paisagem a partir de HTML

Eu tenho um relatório HTML, que precisa ser impresso em paisagem por causa das muitas colunas. Existe uma maneira de fazer isso, sem que o usuário precise alterar as configurações do documento?

E quais são as opções entre os navegadores.

No seu CSS, você pode definir a propriedade @page como mostrado abaixo.

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

A @page faz parte da especificação CSS 2.1, no entanto, isso sizenão é tão destacado pela resposta à pergunta @Page {size: landscape} obsoleta? :

CSS 2.1 não especifica mais o atributo size. O rascunho atual do módulo CSS3 Paged Media o especifica (mas isso não é padrão ou aceito).

Conforme declarado, a opção de tamanho vem da CSS 3 Draft Specification . Em teoria, pode ser definido para o tamanho e a orientação da página, embora na minha amostra o tamanho seja omitido.

O suporte é muito misto com um relatório de erro iniciado no firefox , a maioria dos navegadores não o suporta.

Pode parecer funcionar no IE7, mas isso ocorre porque o IE7 lembrará a última seleção de paisagem ou retrato dos usuários na visualização de impressão (somente o navegador será reiniciado).

Este artigo tem algumas sugestões de soluções alternativas usando JavaScript ou ActiveX que enviam chaves para o navegador dos usuários, embora não sejam ideais e dependam da alteração das configurações de segurança do navegador.

Como alternativa, você pode girar o conteúdo em vez da orientação da página. Isso pode ser feito criando um estilo e aplicando-o ao corpo que inclui essas duas linhas, mas isso também tem desvantagens, criando muitos problemas de alinhamento e layout.

<style type="text/css" media="print">
    .page
    {
     -webkit-transform: rotate(-90deg); 
     -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
</style>

A alternativa final que encontrei é criar uma versão paisagem em um PDF. Você pode apontar para isso quando o usuário seleciona imprimir, imprime o PDF. No entanto, não consegui fazer isso imprimir automaticamente no IE7.

<link media="print" rel="Alternate" href="print.pdf">

Concluindo, em alguns navegadores, é fácil usar a opção @page size, no entanto, em muitos navegadores, não há um caminho certo e isso dependeria do seu conteúdo e ambiente. Talvez por isso, o Google Documents cria um PDF quando a impressão é selecionada e permite que o usuário abra e imprima isso.

Minha solução:

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

Isso funciona em IE, FirefoxeChrome

Não basta apenas girar o conteúdo da página. Aqui está um CSS correto que funciona na maioria dos navegadores (Chrome, Firefox, IE9 +).

Primeiro, defina o corpo margincomo 0, porque, caso contrário, as margens da página serão maiores que as definidas na caixa de diálogo de impressão. Defina também a backgroundcor para visualizar as páginas.

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

margin, borderE backgroundsão necessários para visualizar páginas.

paddingdeve ser definido como a margem de impressão necessária. Na caixa de diálogo de impressão, você deve definir as mesmas margens (10 mm neste exemplo).

div.portrait, div.landscape {
  margin: 10px auto;
  padding: 10mm;
  border: solid 1px black;
  overflow: hidden;
  page-break-after: always;
  background: white;
}

O tamanho da página A4 é 210 mm x 297 mm. Você precisa subtrair margens de impressão do tamanho. E defina o tamanho do conteúdo da página:

div.portrait {
  width: 190mm;
  height: 276mm;
}
div.landscape {
  width: 276mm;
  height: 190mm;
}

Eu uso 276 mm em vez de 277 mm, porque diferentes navegadores dimensionam as páginas de maneira um pouco diferente. Portanto, alguns deles imprimirão conteúdo com 277 mm de altura em duas páginas. A segunda página estará vazia. É mais seguro usar 276mm.

Nós não precisa de nenhum margin, border, padding, backgroundna página impressa, então removê-los:

@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;
  }
}

Note que a origem da transformação é 0 0! Além disso, o conteúdo das páginas em paisagem deve ser movido 276 mm para baixo!

Além disso, se você tiver uma mistura de páginas retrato e paisagem, o IE diminuirá o zoom. Nós o -ms-zoomcorrigimos definindo para 1.665. Se você definir para 1,6666 ou algo assim, a borda direita do conteúdo da página poderá ser cortada algumas vezes.

Se você precisar de IE8- ou outros navegadores antigos apoio que você pode usar -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3). Mas para navegadores modernos o suficiente não é necessário.

Aqui está uma página de teste:

<!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 em CSS-Discuss Wiki

A regra @page foi reduzida no escopo de CSS2 para CSS2.1. A regra CSS2 @page completa foi declaradamente implementada apenas no Opera (e com erros até então). Meus próprios testes mostram que o IE e o Firefox não suportam @page. De acordo com a seção 13.2.2, agora obsoleta, das especificações do CSS2, é possível substituir a configuração de orientação do usuário e (por exemplo) forçar a impressão no modo Paisagem, mas a propriedade "size" relevante foi removida do CSS2.1, consistente com o fato que nenhum navegador atual suporta. Foi restabelecido no módulo CSS3 Paged Media, mas observe que este é apenas um rascunho de trabalho (em julho de 2009).

Conclusão: esqueça a página no momento. Se você acha que seu documento precisa ser impresso na orientação Paisagem, pergunte a si mesmo se você pode tornar seu design mais fluido. Se você realmente não puder (talvez porque o documento contenha tabelas de dados com muitas colunas, por exemplo), será necessário aconselhar o usuário a definir a orientação para Paisagem e talvez descrever como fazê-lo nos navegadores mais comuns. Obviamente, alguns navegadores possuem um recurso de impressão que se ajusta à largura (encolher para ajustar) (por exemplo, Opera, Firefox, IE7), mas é desaconselhável confiar nos usuários que têm esse recurso ou o estão ligado.

Tente adicionar este seu CSS:

@page {
  size: landscape;
}

A sizepropriedade é o que você procura, conforme mencionado. Para definir a orientação e o tamanho da sua página durante a impressão, você pode usar o seguinte:

/* ISO Paper Size */
@page {
  size: A4 landscape;
}

/* Size in mm */    
@page {
  size: 100mm 200mm landscape;
}

/* Size in inches */    
@page {
  size: 4in 6in landscape;
}

Aqui está um link para a documentação da @page .

Você pode usar a regra CSS 2 @page que permite definir a propriedade 'size' para paisagem .

Você também pode usar o modo de gravação de atributo css não padrão do IE somente

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

-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

não está funcionando no Firefox 16.0.2, mas está funcionando no Chrome

Criei um documento em branco do MS com paisagem e o abri no bloco de notas. Copiei e colei o seguinte na minha 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>

A visualização de impressão mostra as páginas em um tamanho de paisagem. Isso parece estar funcionando bem no IE e no Chrome, não testado no FF.

Tentei resolver esse problema uma vez, mas toda a minha pesquisa me levou a controles / plug-ins ActiveX. Não há truques que os navegadores (há 3 anos atrás) permitam alterar as configurações de impressão (número de cópias, tamanho do papel).

Coloquei meus esforços em alertar o usuário com cuidado de que eles precisavam selecionar "paisagem" quando a caixa de diálogo de impressão dos navegadores aparecesse. Também criei uma página de "pré-visualização", que funcionou muito melhor do que o IE6! Nosso aplicativo tinha tabelas de dados muito amplas em alguns relatórios, e a visualização da impressão deixava claro para os usuários quando a tabela se derramava na borda direita do papel (já que o IE6 também não conseguia lidar com a impressão em duas folhas).

E sim, as pessoas ainda estão usando o IE6 agora.

<style type="text/css" media="print">
.landscape { 
    width: 100%; 
    height: 100%; 
    margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1); 
} 
</style>

Se você deseja que esse estilo seja aplicado a uma tabela, crie uma tag div com essa classe de estilo e adicione a tag table nessa tag div e feche a tag div no final.

Esta tabela será impressa apenas na paisagem e todas as outras páginas serão impressas apenas no modo retrato. Mas o problema é que, se o tamanho da tabela é maior que a largura da página, podemos perder algumas linhas e, às vezes, os cabeçalhos também são perdidos. Seja cuidadoso.

Tenha um bom dia.

Obrigado, Naveen Mettapally.

Tentei a resposta de Denis e encontrei alguns problemas (as páginas de retrato não foram impressas corretamente depois de procurar as páginas de paisagem), então aqui está a minha solução:

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>

Isso também funcionou para mim:

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

Se você deseja ver a paisagem na tela antes de imprimir, bem como a impressão, em seu css, é possível definir a largura para 900px e a altura para 612px.

OP não mencionou o tamanho A4. Presumo que seja o tamanho da letra nos meus números acima.

Você pode tentar o seguinte:

@page {
    size: auto
}