Margem ao imprimir a página html

141

Estou usando uma folha de estilo separada para impressão. É possível definir as margens direita e esquerda na folha de estilo que define a margem de impressão (ou seja, margem no papel).

Obrigado.

kobra
fonte

Respostas:

247

Você deve usar cmou mmcomo unidade quando especificar para impressão. O uso de pixels fará com que o navegador o traduza para algo semelhante ao que parece na tela. Usar cmou mmgarantirá um tamanho consistente no papel.

body
{
  margin: 25mm 25mm 25mm 25mm;
}

Para tamanhos de fonte, use ptpara a mídia de impressão.

Observe que definir a margem no corpo no estilo css não ajustará a margem no driver da impressora que define a área imprimível da impressora ou a margem controlada pelo navegador (pode ser ajustável na visualização de impressão em alguns navegadores) ... apenas definirá margem no documento dentro da área imprimível.

Você também deve estar ciente de que o IE7 ++ ajusta automaticamente o tamanho para melhor se ajustar e faz com que tudo fique errado, mesmo se você usar cmou mm. Para substituir esse comportamento, o usuário deve selecionar 'Visualizar impressão' e definir o tamanho da impressão como 100%(o padrão é Shrink To Fit).

Uma opção melhor para o controle total das margens impressas é usar a @pagediretiva para definir a margem do papel, o que afetará a margem do papel fora do elemento do corpo html, que normalmente é controlado pelo navegador. Consulte http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .
Atualmente, ele funciona em todos os principais navegadores, exceto o Safari.
No Internet Explorer, a margem é realmente definida para esse valor nas configurações para esta impressão e, se você fizer a Visualização, obterá isso como padrão, mas o usuário poderá alterá-lo na visualização.

@page  
{ 
    size: auto;   /* auto is the initial value */ 

    /* this affects the margin in the printer settings */ 
    margin: 25mm 25mm 25mm 25mm;  
} 

body  
{ 
    /* this affects the margin on the content before sending to printer */ 
    margin: 0px;  
} 

Resposta relacionada: Desativando as opções de impressão do navegador (cabeçalhos, rodapés, margens) da página?

temor
fonte
3
Isso funciona agora no Chrome 18 e IE9 (não testou versões anteriores). Ainda não está funcionando no Firefox 12, mas você pode fazer uma detecção no lado do servidor e adicionar uma classe corporal <body class="firefox">para que no seu css você possa fazer body.firefox {margin: 0mm; padding: 0.25in;}, que é na verdade uma margem de 0,75 polegadas, porque o Firefox já adiciona 0,5in. Isso deve funcionar desde que você precise de margens de 0,5 polegada.
MrFusion
7
+1 para @page! Era exatamente disso que eu precisava, pois estou imprimindo várias páginas.
ataque aéreo
2
Agora também funciona com o Firefox. Como o Firefox possui boas rotinas de atualização automática, isso não deve ser mais um problema que precisamos resolver. Eu testei no IE, Opera, Chrome, Firefox e Safari. O único navegador com o qual atualmente não funciona é o Safari (versão 5.1.7 para Windows). Eu não testei no Mac.
temor
1
Isso adiciona apenas a margem superior na primeira página. Melhor solução para definir as mesmas margens em todas as páginas: stackoverflow.com/questions/37033766/…
besimple
@besimple: Veja o exemplo abaixo. O uso da diretiva "@ page" adicionará a margem em todas as páginas.
temor
42

Em primeiro lugar, tento forçar todos os meus usuários a usar o Chrome ao imprimir, porque outros navegadores criam layouts diferentes.

Uma resposta desta pergunta recomenda:

@page {
  size: 210mm 297mm; 
  /* Chrome sets own margins, we change these printer settings */
  margin: 27mm 16mm 27mm 16mm; 
}

No entanto, acabei usando este CSS para todas as minhas páginas serem impressas:

@media print 
{
    @page {
      size: A4; /* DIN A4 standard, Europe */
      margin:0;
    }
    html, body {
        width: 210mm;
        /* height: 297mm; */
        height: 282mm;
        font-size: 11px;
        background: #FFF;
        overflow:visible;
    }
    body {
        padding-top:15mm;
    }
}



Caso especial: Mesas Longas

Quando precisei imprimir uma tabela em várias páginas, o margin:0com @pageestava levando a bordas sangrentas:

bordas sangrando

Eu poderia resolver isso graças a esta resposta com:

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group; }
tfoot { display:table-footer-group; }

Além disso, defina as margens superior-inferior para @page:

@page { 
    size: auto;
    margin: 20mm 0 10mm 0;
}
body {
    margin:0;
    padding:0;
}

Resultado:

bordas sangradas resolvidas

Prefiro uma solução concisa e que funcione com todos os navegadores. Por enquanto, espero que as informações acima possam ajudar alguns desenvolvedores com problemas semelhantes.

Kai Noack
fonte
1
Sua solução se mostrou inestimável ao trabalhar com a impressão de relatórios usando o ERPNext. Consegui desenvolver meus próprios formatos de impressão personalizados com facilidade e esses indicadores ajudaram imensamente!
Tropicalrambler
10

Solução simples e atualizada

@media print {
   body {
       display: table;
       table-layout: fixed;
       padding-top: 2.5cm;
       padding-bottom: 2.5cm;
       height: auto;
   }
}

Solução antiga

Crie uma seção com cada página e use o código abaixo para ajustar margens, altura e largura.

Se você estiver imprimindo no tamanho A4.

Então usuário

Tamanho: 8.27in e 11.69 polegadas

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}



div.Section1 {
    page: Section1;
} 

em seguida, crie uma div com todo o seu conteúdo.

<div class="Section1"> 
    type your content here... 
</div>
Pir Abdul
fonte
Isso não está funcionando para mim no Chrome ou no FF. Além disso, class=Section1deveria ser class="Section1".
Nu everest
Esta é uma solução mais simples: stackoverflow.com/questions/37033766/…
besimple
9

Eu pessoalmente sugeriria usar uma unidade de medida diferente daquela px. Não acho que os pixels tenham muita relevância em termos de impressão; idealmente você usaria:

  • ponto (pt)
  • centímetro (cm)

Tenho certeza que existem outros, e um excelente artigo sobre print-css pode ser encontrado aqui: Going to Print , de Eric Meyer .

David diz para restabelecer Monica
fonte
1
Você está certo que pxnão tem muita relevância para imprimir. Mas os navegadores "convertem" unidades de pixel para que pareçam com a aparência na tela. Ele não usa os "pontos de resolução da impressora" como pixels (graças a Deus ...).
quer
1

Também recomendo pt versus cm ou mm, pois é mais preciso. Além disso, não consigo que o @page funcione no Chrome (versão 30.0.1599.69 m). Ele ignora qualquer coisa que eu coloquei nas margens, grandes ou pequenas. Mas você pode fazê-lo funcionar com as margens do corpo no documento, estranho.

arma de ferro
fonte
0

Se você souber o tamanho do papel de destino, poderá colocar seu conteúdo em um DIV com esse tamanho específico e adicionar uma margem a esse DIV para simular a margem de impressão. Infelizmente, não acredito que você tenha controle extra sobre a funcionalidade de impressão, apenas mostre a caixa de diálogo de impressão.

jonjbar
fonte
Obrigado. Não é possível especificar deixar x pixels à esquerda e à direita, independentemente do tamanho do papel. Atenciosamente
kobra
1
Eu acho que isso pode ser possível se você definir o tamanho do DIV do pai para 100% e adicionar uma margem de pixels ax a ele.
jonjbar