Impressão em paisagem a partir de HTML

244

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.

doekman
fonte

Respostas:

379

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.

John
fonte
28
estranho que diga 'tamanho' pode ser paisagem, quando na verdade é uma 'orientação'.
9609 Magnus Smith
1
@page sizeParece não funcionar em todos os navegadores modernos, apenas no Firefox. Chrome e Opera desconsideram isso, tanto quanto eu vi.
perfil completo de Justin808
2
size: landscapeé NÃO parte de CSS2.1, embora @pageregras. É, no entanto, parte do CSS3. Para confirmação, tente usar o W3C CSS Validator e insira @page {size: landscape}e compare os resultados com "Profile" definido como nível 2.1 vs nível 3.
daiscog
1
Quando você tem uma div que ocupa 100 largura ou altura da página, a rotação não faz com que a div ocupe o espaço de uma página em retrato, mas uma paisagem que girou. Portanto, algumas partes da div ficam fora da página.
Oliver
6
@AbeerSul - Para ser honesto, sobre CSS, o que faz o trabalho no IE;)
Tony
27

Minha solução:

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

Isso funciona em IE, FirefoxeChrome

Eduardo Cuomo
fonte
1
E se eu quisesse que certas classdiv estivessem na paisagem e não a página inteira?
SearchForKnowledge
2
@SearchForKnowledge - isso seria a transformação do css3: rotate (90deg).
Página
Não entendi o que estou fazendo de errado, mas isso quebra a página inteira no chrome. Esta é a linha que eu copiei a partir do código @media imprimir {@page {size: Retrato;} body {escrita-mode: tb-rl;}}
X-humanos
Para mim, adicionar apenas esta @page {size: landscape; } trabalho.
Kumar H
1
Em 2018, ainda funciona muito bem com componentes WebBrowers padrão. Obrigado.
precisa saber é o seguinte
14

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>
Denis
fonte
Muito obrigado, funciona como um encanto (cromo usado) com as páginas da Web que consistem em uma mistura dos modos paisagem e retrato.
zcahfg2
De onde são div.portrait, div.landscape?
zcahfg2
Isso funcionou no IE 11 para alguém? Parece que todos os elementos estão desativados.
Mzonerz 25/09/19
1
@mzonerz Acabei de testar no IE 11, funciona bem. Eu adicionei um html de teste no final da resposta. Observe que você deve definir as margens da página para 10 mm nas configurações de impressão. Se você precisar de margens de página diferentes, precisará atualizar os seguintes valores: preenchimento: 10mm; largura: 190mm; altura: 190mm;
Denis
@ Denis Obrigado por seus esforços .. Na verdade, esta é a única solução que funcionou para mim até agora ... bom !!, as pessoas que integram essa solução nos sites da intranet do sharepoint podem precisar desativar as configurações de exibição de compatibilidade.
mzonerz 26/09/19
13

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.

Ahmad Alfy
fonte
4
Esse é o "CSS-Discuss Wiki", não a "Wikipedia".
jball
12

Tente adicionar este seu CSS:

@page {
  size: landscape;
}
aparelho
fonte
2
Isso funcionou para você com algum navegador? Com o IE8 e o Firefox3.5, não pareceu fazer nenhuma diferença na visualização da impressão.
21711 Daniel Ballinger
Infelizmente, a visualização da impressão não segue todas as propriedades do CSS. Mas isso deve funcionar em todos os navegadores atuais.
gizmo
Obrigado por acompanhar isso. Também não parece funcionar para mim com a impressão real. Perdi alguma coisa? Meu arquivo de teste é o seguinte: (Eu tive que truncar o conteúdo do parágrafo para caber na caixa de comentários) <html> <head> <title> Página de teste de paisagem </title> <style> @Page {size: landscape; } </ Style> </ head> <body> <p> Lorem ipsum dolor sit amet, ... </ p> </ body> </ html>
Daniel Ballinger
Eu tentei todas as combinações da regra @Page mostrada nesta página e algumas de outros sites, bem como o exemplo no HTML / XHTML de O'Reilly: The Definitive Guide, Fifth Edition. Não consegui fazer isso funcionar no IE8, Firefox 3.6 ou Chrome 7.0.
Paul Keister
Eu sei que 2012 ... mas esta resposta me ajudou ... para apoiar a opção paisagem para o IE8 ... obrigado
Vikram
11

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 .

robstarbuck
fonte
Quando usada com autoinicialização, essa declaração deve ser armazenada em um .cssarquivo separado ou, se estiver em linha, a declaração inicial do autoestrap ( size: a3) terá precedência.
caram
5

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;
}
yann.kmm
fonte
1
Isso reorienta o conteúdo da página, mas na verdade não altera o layout da página para paisagem. Ou seja, os cabeçalhos e rodapés ainda serão adicionados como se a página estivesse em retrato.
217 Daniel Ballinger
2
-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

Satheesh
fonte
2

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.

Shankar
fonte
1

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.

Magnus Smith
fonte
1
<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.

Naveen Mettapally
fonte
1
Isso gira o conteúdo da tela em 90 graus, mas a impressão ainda sai no formato protrait. O pior dos dois mundos realmente, pelo menos em ie8.
Arame3333
1

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>

Arkadiy Bolotov
fonte
0

Isso também funcionou para mim:

@media print and (orientation:landscape) {  }
Navin Rauniyar
fonte
2
Em quais navegadores você testou?
Mike Kormendy
0

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.

Água Azul
fonte
-1

Você pode tentar o seguinte:

@page {
    size: auto
}
Sherz
fonte