Paisagem imprimir a partir de HTML
https://stackoverflow.com/questions/138422
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu tenho um relatório HTML, que precisa ser impresso paisagem por causa das muitas colunas. É Existe uma maneira de fazer isso, sem que o usuário ter que alterar as configurações do documento?
E quais são as opções entre browsers.
Solução
Em seu CSS você pode definir a propriedade @page como mostrado abaixo.
@media print{@page {size: landscape}}
O @page faz parte do CSS 2.1 especificação no entanto este size não é tão destacado pela resposta à pergunta Is @Page {size: paisagem} obsoletos :
CSS 2.1 não especifica o atributo de tamanho. O trabalho atual projecto para o módulo CSS3 paginada mídia faz especificá-lo (mas isso não é padrão ou aceita).
Como afirmado a opção de tamanho vem da CSS 3 Projecto Especificação . Em teoria, pode ser configurado tanto para um tamanho de página e orientação embora na minha amostra do tamanho é omitido.
O apoio é muito misturado com um relatório de erro começam arquivado no firefox , a maioria dos navegadores não apoiá-lo.
Pode parecer ao trabalho no IE7, mas isso é porque IE7 vai lembrar os usuários última seleção de paisagem ou retrato na visualização de impressão (apenas o navegador é re-iniciado).
Este artigo tem algumas arounds trabalho sugeriu o uso de JavaScript ou ActiveX que as chaves Enviar para o navegador dos usuários, embora eles não são ideais e dependem de alterar as configurações de segurança do navegador.
Como alternativa, você pode rodar o conteúdo e não a orientação da página. Isto pode ser feito através da criação de um estilo e aplicá-lo para o corpo que inclui estas duas linhas, mas isso também tem seus inconvenientes, 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 última alternativa que eu encontrei é criar uma versão paisagem em um PDF. Você pode apontar para isso, quando o usuário seleciona imprimi-lo imprime o PDF. No entanto, eu não poderia chegar a este trabalho de impressão automática em IE7.
<link media="print" rel="Alternate" href="print.pdf">
Em conclusão em alguns navegadores é relatividade fácil usando a opção de tamanho @page no entanto, em muitos navegadores não há nenhuma maneira certa e que iria depender do seu conteúdo e meio ambiente. Este talvez por que o Google Documents cria um PDF quando impressão é selecionada e, em seguida, permite que o usuário abrir e imprimir isso.
Outras dicas
A minha solução:
<style type="text/css" media="print">
@page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>
Isso funciona em IE, Firefox e Chrome
A regra @page foi cortada em escopo de CSS 2 para CSS2.1. O cheio regra @page CSS2 foi declaradamente implementado apenas em Opera (e buggily mesmo assim). Meus próprios testes mostra que IE e Firefox não suportam @page em tudo. De acordo com a agora obsoleta seção CSS2 especificações 13.2.2 é possível substituir do usuário ajuste de orientação e (para exemplo) forçar a impressão na paisagem mas a propriedade "tamanho" relevante tem sido caiu de CSS2.1, consistente com o fato de que nenhum navegador atual suporta. Tem sido reintegrado no o módulo CSS3 paginada mídia, mas nota que este é apenas um projeto de trabalho (como em Julho de 2009).
Conclusão: esquecer sobre @page para o presente. Se vocês sentir suas necessidades de documentos a serem impressos na orientação paisagem, pergunte a si mesmo se você pode sim fazer seu projeto mais fluido. Se você realmente não pode (Talvez porque o documento contém tabelas de dados com muitas colunas, para exemplo), você vai precisar para aconselhar o de utilizador para definir a orientação para Paisagem e talvez descrevem como fazê-lo em todos os navegadores mais comuns. Do Naturalmente, alguns navegadores têm uma impressão ajustar-se a largura (encolher-se apto) característica (Por exemplo, Opera, Firefox, IE7), mas é desaconselhável a contar com os usuários que têm essa facilidade ou tê-la ligado por diante.
Tente adicionar este o seu CSS:
@page {
size: landscape;
}
Você pode ser capaz de usar a CSS 2 @page regra que permite você definir a propriedade 'size' à paisagem .
A propriedade size é o que você está depois, como mencionado. Para definir a orientação e tamanho da sua página durante a impressão, você poderia 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 o @page documentação .
Não é suficiente apenas para rodar o conteúdo da página. Aqui está uma CSS direito que trabalham na maioria dos navegadores (Chrome, Firefox, IE9 +).
Primeiro conjunto corpo margin a 0, porque senão margens da página será maior do que aqueles que você definir na caixa de diálogo de impressão. Também conjunto de cores background para visualizar páginas.
body {
margin: 0;
background: #CCCCCC;
}
margin, border e background são necessários para visualizar páginas.
padding deve ser ajustado à margem de impressão necessário. Na caixa de diálogo de impressão é necessário 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 de página A4 é 210 milímetros x 297 milímetros. Você precisa subtrair margens de impressão a partir do tamanho. E definir o tamanho do conteúdo da página:
div.portrait {
width: 190mm;
height: 276mm;
}
div.landscape {
width: 276mm;
height: 190mm;
}
Eu uso 276 milímetros em vez de 277 milímetros, porque diferentes navegadores escalar páginas um pouco diferente. Então, alguns deles vão imprimir conteúdo 277 milímetros altura em duas páginas. A segunda página estará vazia. É mais seguro usar 276 milímetros.
Não precisamos de qualquer margin, border, padding, background na 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 paisagem deve ser movido 276 milímetros para baixo!
Além disso, se você tem uma mistura de páginas retrato e lanscape IE irá diminuir o zoom das páginas. Nós corrigi-lo, definindo -ms-zoom para 1,665. Se você configurá-lo para 1,6666 ou algo assim a borda direita do conteúdo da página pode ser cortada às vezes.
Se você precisa IE8- ou outros navegadores antigos apoiar você pode usar -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3). Mas para navegadores modernos suficientes isso não é obrigatório.
Você também pode usar o não-padrão IE-only atributo css -mode escrever
div.page {
writing-mode: tb-rl;
}
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
não funciona no Firefox 16.0.2 mas está trabalhando no Chrome
Eu tentei resolver este problema de uma vez, mas toda a minha pesquisa me levou para controles ActiveX / plug-ins. Não há nenhum truque que os navegadores (3 anos de qualquer maneira) permissão para alterar as configurações de impressão (número de cópias, tamanho do papel).
Eu coloquei meus esforços para alertar o usuário com cuidado que eles precisavam para selecionar "paisagem" quando os navegadores imprimir diálogo apareceu. Eu também criou uma página "visualização de impressão", que funcionou muito melhor do que o IE6 de fez! Nossa aplicação teve muito largas tábuas de dados em alguns relatórios e visualização de impressão deixou claro para os usuários quando a tabela iria derramar off the-borda direita do papel (desde IE6 não poderia lidar com a impressão em 2 folhas quer).
E sim, as pessoas ainda estão usando o IE6, mesmo 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ê quer este estilo a ser aplicado a uma tabela, em seguida, criar uma tag div com esta classe estilo e adicionar a tag tabela dentro dessa tag div e fechar a tag div no final.
Esta tabela só vai imprimir na paisagem e todas as outras páginas serão impressas apenas no modo retrato. Mas o problema é se o tamanho da tabela é mais do que a largura da página, em seguida, podemos perder algumas das linhas e às vezes cabeçalhos também são perdidas. Tenha cuidado.
Tenha um bom dia.
Obrigado, Naveen Mettapally.
Eu criei um espaço em branco MS Documento com ajuste Paisagem e, em seguida, abriu-o no bloco de notas. Copiado e colado o seguinte à 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 Chrome, não testados em FF.
Isso também trabalhou para mim:
@media print and (orientation:landscape) { … }
