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

182

Eu já vi essa pergunta de várias maneiras no SO e em vários outros sites, mas a maioria deles é muito específica ou desatualizada. Espero que alguém possa fornecer uma resposta definitiva aqui, sem pensar em especulações.

Existe uma maneira, com CSS ou javascript, de alterar as configurações padrão da impressora quando alguém imprime no navegador? E, é claro, com "impressões do navegador", quero dizer alguma forma de HTML, não PDF ou algum outro tipo de mímica compatível com plug-in.

Observe:

Se alguns navegadores oferecem isso e outros não (ou se você sabe apenas fazê-lo para alguns navegadores), agradeço as soluções específicas do navegador.

Da mesma forma, se você souber de um navegador convencional que tenha restrições específicas contra NUNCA, isso também será útil, mas alguma documentação bastante atualizada será apreciada. (simplesmente dizer "isso contraria a política de segurança da XYZ" não é muito convincente quando a XYZ fez alterações significativas nessa política nos últimos três anos).

Por fim, quando digo "alterar as configurações de impressão padrão", não digo para sempre, apenas para minha página, e estou me referindo especificamente a margens, cabeçalhos e rodapés de impressão.

Estou ciente de que o CSS oferece a opção de alterar a orientação da página e as margens da página. Uma das muitas lutas é com o Firefox. Se eu definir as margens da página para 1 polegada, ele adiciona isso à meia polegada já colocada.

Eu quero muito reduzir o uso de PDFs no site do meu cliente, mas a violação da apresentação (bem como a falta de confiabilidade) são sua principal preocupação.

javascript html css browser printing Anthony
fonte
Existe algum motivo específico para você querer fazer isso? Se você disser a exigência, então talvez poderia haver uma outra possível solução ... Para mim mudar as configurações de usuário não parece ser uma boa solução ...
Nivas
1
Concordo. Não quero alterar as configurações do usuário. Desejo substituir as configurações padrão do navegador. E o motivo é que a alternativa é usar um PDF, o que parece desnecessário quando tudo o mais pode ser feito para impressão via CSS.
Anthony
Vejo que você verificou a resposta como a solução, mas funciona apenas no chrome. você conseguiu obter uma solução correta no navegador? ou pelo menos em alguns navegadores? Porque eu tenho o mesmo problema
Mavili
@mavili, consulte stackoverflow.com/a/23778125/453605 para obter uma solução entre navegadores.
Marcello Nuccio

Respostas:

200

O padrão CSS permite alguma formatação avançada. Existe uma @pagediretiva no CSS que habilita alguma formatação que se aplica apenas à mídia paginada (como papel). Consulte http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .

A desvantagem é que o comportamento em diferentes navegadores não é consistente. O Safari ainda não suporta a configuração da margem da página da impressora, mas agora todos os outros principais navegadores são compatíveis.

Com a @pagediretiva, você pode especificar a margem da impressora da página (que não é a mesma da margem CSS normal de um elemento HTML):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Print Test</title>
    <style type="text/css" media="print">
    @page 
    {
        size:  auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;  /* this affects the margin on the html before sending to printer */
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

Observe que basicamente desabilitamos as margens específicas da página aqui para obter o efeito de remover o cabeçalho e o rodapé; portanto, a margem que definimos no corpo não será usada nas quebras de página (como comentado por Konrad ) Isso significa que ele só funcionará corretamente se o conteúdo impresso for apenas uma página.

Isso não funciona no Firefox 3.6 , IE 7 , Safari 5.1.7 ou Google Chrome 4.1 .

A definição da margem @page tem efeito no IE 8 , Opera 10 , Google Chrome 21 e Firefox 19 .
Embora as margens da página estejam definidas corretamente para o seu conteúdo nesses navegadores, o comportamento não é ideal na tentativa de resolver a ocultação do cabeçalho / rodapé.

É assim que se comporta em diferentes navegadores:

  • No Internet Explorer , a margem é realmente definida como 0 mm nas configurações desta impressão e, se você executar a Visualização, receberá 0 mm como padrão, mas o usuário poderá alterá-la na visualização.
    Você verá que o conteúdo da página está realmente posicionado corretamente, mas o cabeçalho e o rodapé de impressão do navegador são mostrados com fundo não transparente e, assim, ocultam o conteúdo da página nessa posição.

  • Nas versões mais recentes do Firefox , ele está posicionado corretamente, mas o texto do cabeçalho / rodapé e o conteúdo são exibidos, portanto, parece uma mistura ruim do texto do cabeçalho do navegador e do conteúdo da página.

  • No Opera , o conteúdo da página oculta o cabeçalho ao usar um plano de fundo não transparente no CSS padrão e a posição do cabeçalho / rodapé entra em conflito com o conteúdo. Muito bom, mas parece estranho se a margem estiver definida como um valor pequeno que faz com que o cabeçalho fique parcialmente visível. Além disso, a margem da página não está definida corretamente.

  • Nas versões mais recentes do Chrome , o cabeçalho e o rodapé do navegador ficam ocultos se a margem @page for definida tão pequena que a posição do cabeçalho / rodapé entre em conflito com o conteúdo. Na minha opinião, é exatamente assim que isso deve se comportar.

Portanto, a conclusão é que o Chrome tem a melhor implementação disso em relação à ocultação do cabeçalho / rodapé.

temor
fonte
1
Para esclarecer, isso não parece remover os cabeçalhos do Firefox 21 ou IE10, embora eu suspeite que tenha causado o cabeçalho / rodapé a não ocupar espaço. Funciona com o Chrome 28. #
amh15
2
Atualizei para refletir as versões mais recentes do navegador. O Chrome agora tem a melhor implementação disso.
temor
@SearchForKnowledge: Sim, é como eu disse - se você ler minha resposta na descrição de como se comporta no IE: "Você verá que o conteúdo da página está realmente posicionado corretamente, mas o cabeçalho e o rodapé do navegador estão ocultando a página conteúdo nessa posição ". Eu digo que "tem efeito" no IE 8, não que funcione como queremos ... Editarei minha resposta para deixar isso mais claro.
temor
Remove os cabeçalhos, mas também o nome esquerdo. Então, todo o meu texto está na borda da página agora.
Mittchel
7
Esta solução simplesmente não funciona em tudo , porque @pageas margens e bodymargens são fundamentalmente coisas diferentes: a bodymargem se aplica apenas ao corpo inteiro , ou seja, a parte superior da primeira página e na parte inferior da última página. Para todas as páginas intermediárias, a parte superior / inferior ainda terá uma margem zero.
Konrad Rudolph
86

Qualquer versão recente do Chrome e Opera, bem como o Firefox 48 alpha 1 e superior

Você pode definir a margem da página para um tamanho pequeno demais para conter o texto, a fim de desativar isso (tomando emprestado a resposta de admiração ):

@page {
  size: auto;  /* auto is the initial value */
  margin: 0mm; /* this affects the margin in the printer settings */
}
html {
  background-color: #FFFFFF;
  margin: 0px; /* this affects the margin on the HTML before sending to printer */
}
body {
  border: solid 1px blue;
  margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}
<ol>
  <li>
    <a href="data:,No Javascript :-(" target="_blank">Middle-click to open in new tab</a>
  </li>
  <li>
    <a href="javascript:print()">Print</a>
  </li>
</ol><!-- Hack to work around stack snippet restrictions --><script type=application/javascript>document.links[0].href="data:text/html;charset=utf-8,"+encodeURIComponent('<!doctype html>'+document.documentElement.outerHTML)</script>
Expandir snippet

Para versões do Firefox até 48 alfa 1

Você pode adicionar um mozNoMarginBoxesatributo à <html>tag para impedir que o URL, os números de página e outras coisas que o Firefox adiciona à margem da página sejam impressos.

Está funcionando no Firefox 29 em diante. Você pode ver uma captura de tela da diferença aqui ou ver um exemplo ao vivo.

Observe que o mozDisallowSelectionPrintatributo no exemplo não é necessário para remover o texto das margens; consulte O que o atributo mozdisallowselectionprint no PDF.js faz? .

Outros navegadores

Infelizmente, parece não haver maneira de resolver esse problema no Internet Explorer; portanto, você precisará recorrer ao PDF ou solicitar aos usuários que desabilitem os textos de margem.

O mesmo vale para o Safari; de acordo com um comentário de @Luiz Perez , as versões mais recentes do Safari (8, 9.1 e 10) ainda não suportam @pagea supressão de textos de margem.

Não consigo encontrar nada no Edge e não tenho uma instalação do Windows 10 disponível para teste.

user2428118
fonte
5
Sinceramente, concordo com isso. Até funciona no Chrome se você imprimir usando a "caixa de diálogo Sistema". apenas verifique se <!DOCTYPE html> <html moznomarginboxes mozdisallowselectionprint>está definido. Fonte:https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383
Peter
3
Funciona muito bem no Firefox. Portanto, isso junto com o @page{ size: auto; margin: 3mm; } suporte ao chrome e safari fez uma solução entre navegadores para mim.
Clain Dsilva
Esta solução funciona muito bem para remover informações / conteúdos indesejados em materiais impressos no FF. Obrigado!
Varvara Jones
Isso é ótimo, mas e o IE?
Santosh 29/06
1
Testei esse trecho no Safari 8, 9.1 e 10 e ele não remove o cabeçalho ou rodapé nessas versões do Safari.
Luis Perez
21

Como a @Awe havia dito acima, esta é a solução, que está confirmada para funcionar no Chrome !!

Apenas verifique se está DENTRO das tags principais:

<head>
<style media="print">
    @page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    body 
    {
        background-color:#FFFFFF; 
        border: solid 1px black ;
        margin: 0px;  /* this affects the margin on the content before sending to printer */
   }
</style>
</head>
Trabalho
fonte
3
Esta é uma solução muito boa! Remove as margens e remove o cabeçalho e rodapé. Minha única alteração foi adicionar padding: 0.25in 0.5in;aos estilos do corpo para ter as margens exatas necessárias para uma impressão agradável e limpa. Trabalhando no Chrome v25, e, felizmente, para este projeto em particular, podemos pedir aos usuários finais que escolham entre alguns navegadores modernos.
Charlie Schliesser
2
Infelizmente, isso causa problemas nas impressões de várias páginas. O texto na parte inferior da página é cortado.
Jonathan
Funciona perfeitamente no Chrome 67.0.3396.99 e Firefox 62.0b5 com saída de página única.
Killscreen
16

Eu tenho uma solicitação semelhante de um cliente que deseja remover o cabeçalho, os números de página e o rodapé html. Nesse caso, o cliente está apresentando uma página HTML que pode funcionar como um certificado formal. O URL, a página e o cabeçalho adicionados são irrelevantes e levam a um produto final menos que agradável. De certa forma, parece barato.

Mídia = A impressão não conseguiu desativar esses padrões do navegador. A única solução alternativa é dizer ao usuário para clicar no botão "Engrenagem" e ativar / desativar esses itens. Sério, eu não tinha ideia de que poderia fazer isso por 20 anos (e achamos que o usuário típico terá uma pista para clicar no botão de alternância?).

Se o CSS suportar Media = Print, deverá suportar a capacidade de controlar toda a experiência de impressão do usuário final. Entendo que os navegadores fornecem os campos adicionados, mas por que não permitir que o CSS controle a experiência geral de impressão - se é isso que é desejado? Uma solução de 90% pode ser 100% com mais três campos! Um simples:

#BrowserPrintDefaults{display:none}

seria suficiente.

Novamente, não importa se o usuário final deseja ou não imprimi-lo (talvez seu cliente seja muito particular e não queira URLs impressas flutuando. Ou talvez uma equipe executiva use sites de colaboração privados?). Fico feliz em defender o usuário final, mas se alguém estiver procurando uma resposta, não responda dizendo que é direito do usuário final mostrar ou ocultar. Às vezes, é o direito do cliente pagar as contas.

CAL
fonte
Acabei desistindo, por mais que não quisesse. Definitivamente, concordo que isso deve ser exposto no CSS, pois todos os navegadores têm essas configurações e é um elemento de apresentação. Mas, em vez disso, é uma cena como uma preferência no nível do aplicativo, como ter os cookies desativados.
Anthony
1
É um padrão CSS oficial que usa a @Pagediretiva para definir a margem da impressora (que não é a mesma que a margem do corpo da página html). Atualmente, isso é suportado por todos os principais navegadores, exceto o Safari, mas a forma como isso afeta o cabeçalho / rodapé varia. As melhores implementações estão no Opera e no Chrome.
temor
6

Experimente este código, funciona 100% para mim:
FOR Landscape:

<head>
<style type="text/css">

@page{
  size: auto A4 landscape;
  margin: 3mm;
}

</style>
</head>

PARA Portait:

<head>
<style type="text/css">

@page{
  size: auto;
  margin: 3mm;
}

</style>
</head>
Sim menino
fonte
1
Regras de página CSS irá definir as margens, mas não remova built-in cabeçalho e rodapé colocado pelo navegador (URL da página, número de página, etc)
Anthony
0

Como você mencionou "no navegador" e no firefox, se estiver usando o Internet Explorer, é possível desativar o cabeçalho / rodapé da página definindo temporariamente o valor no registro, veja aqui um exemplo. AFAIK Não ouvi falar de uma maneira de fazer isso em outros navegadores. As respostas de Daniel e Mickel parecem colidir umas com as outras, acho que poderia haver uma configuração semelhante em algum lugar no registro do firefox para remover cabeçalhos / rodapés ou personalizá-los. você conferiu?

Espero que isso ajude e boas festas, Atenciosamente, Tom.

t0mm13b
fonte
1
No IE7 +, você pode desativar o cabeçalho / rodapé com um simples clique no botão Visualizar impressão. Não há necessidade de fazê-lo no registro!
rever
0

@page margin: 0mm agora funciona no Firefox 19.0a2 (07/12/2012).

mais fino
fonte
0

Resolvi meu problema usando css na página da web.

<style media="print">
   @page {
      size: auto;
      margin: 0;
  }
</style>
Kabir Hossain
fonte
0

Isso funcionou para mim com cerca de 1 cm de margem

@page 
{
    size:  auto;   /* auto is the initial value */
    margin: 0mm;  /* this affects the margin in the printer settings */
}
html
{
    background-color: #FFFFFF; 
    margin: 0mm;  /* this affects the margin on the html before sending to printer */
}
body
{
    padding:30px; /* margin you want for the content */
}
afshin
fonte