Remova o cabeçalho e o rodapé de window.print ()

109

Estou usando window.print () para imprimir a página, mas tenho o cabeçalho e o rodapé que contêm o título da página, o caminho do arquivo, o número da página e a data. Como removê-los?

Também tentei imprimir a folha de estilo.

#header, #nav, .noprint
{
display: none;
}

Por favor ajude. Obrigado.

css printing Viralk
fonte
7
Esses elementos são específicos para as configurações do navegador do usuário. Não acho que você conseguirá removê-los por meio de CSS ou JavaScript.
Michael Berkowski
Acho que esta questão precisa de um esclarecimento: Você está tentando remover os elementos de cabeçalho e rodapé do HTML que são exibidos na tela ou deseja eliminar os cabeçalhos e rodapés que são adicionados pela função de impressão?
AlanObject

Respostas:

149

No Chrome é possível ocultar este cabeçalho / rodapé automático usando

@page { margin: 0; }

Uma vez que o conteúdo se estende até os limites da página, o cabeçalho / rodapé de impressão da página estará ausente. Você deve, é claro, neste caso, definir algumas margens / preenchimentos em seu elemento de corpo para que o conteúdo não se estenda até a borda da página. Como as impressoras comuns simplesmente não conseguem imprimir sem margens e provavelmente não é o que você deseja, você deve usar algo assim:

@media print {
  @page { margin: 0; }
  body { margin: 1.6cm; }
}

Como Martin apontou em um comentário, se a página tiver um elemento longo que rola além de uma página (como uma grande mesa), a margem é ignorada e a versão impressa ficará estranha.

Na época original desta resposta (maio de 2013), ela só funcionava no Chrome, não tenho certeza sobre isso agora, nunca precisei tentar novamente. Se você precisar de suporte para um navegador que não pode funcionar, pode criar um PDF em tempo real e imprimi-lo (você pode criar um PDF de impressão automática incorporando JavaScript nele), mas isso é um grande incômodo.

diego nunes
fonte
2
Por algum motivo, body { margin: 1.6cm; }estava ignorando a margem certa para mim (talvez porque eu estava usando text-align:right), então, em vez disso, criei um <div class="container">para o meu conteúdo e usei no .container { margin: 1.6cm; }lugar.
rybo111
8
Estou tentando fazer isso com o Chrome 33. Funciona muito bem, mas tome cuidado, porque body { margin: 1.6cm; }- como é uma margem para todo o documento - não respeitará as margens verticais de documentos de várias páginas, exceto a primeira e a última. Infelizmente, não consigo pensar em uma solução alternativa.
pau.moreno
Olá @Diego, estou feliz com sua sugestão e meu rodapé de cabeçalho foi removido, mas minha página impressa aumentou. "corpo {margem: 1,6 cm;}" basta mudar 1,6 cm para 1,0 cm e está funcionando .. :) Codding feliz
Vishal Kiri
3
Há uma resposta mais extensa aqui: stackoverflow.com/questions/1960939/…
jedison
Remover a margem da página e adicionar a margem do corpo estava gerando uma página vazia para mim. Mudei a margem do corpo para preenchimento e funcionou.
André Guimarães Sakata
21

Tenho certeza de que adicionar este código ao seu arquivo css resolverá o problema

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

Você pode visitar aqui para saber mais sobre isso

Rudias
fonte
3
Não. Não está funcionando. É definir a margem, é isso. Ainda está exibindo url e data e hora no cabeçalho e rodapé
Learner
Funciona para Chrome e Firefox, mas não para IE 11.
Sammi
21

Raposa de fogo :

  • Adicionar moznomarginboxesatributo em<html>

Exemplo:

<html moznomarginboxes mozdisallowselectionprint>
l2aelba
fonte
6
Isso não vai funcionar mais depois que o Firefox 48 for lançado (agosto de 2016): bugzilla.mozilla.org/show_bug.cgi?id=1260480
Aljullu
não funciona para mim, FF 61, mas a @page {margin: 0; } solução parece funcionar no FF também.
Kiko
11

Hoje meu colega topou com o mesmo problema.

Como a solução "margin: 0" funciona para navegadores baseados em cromo, no entanto, o Internet Explorer continua a imprimir o rodapé mesmo se as margens da @page forem definidas como zero.

A solução (mais um hack) foi colocar uma margem negativa na @page.

@page {margin:0 -6cm}
html {margin:0 6cm}

Observe que a margem negativa não funcionará para o eixo Y, apenas para X

Espero que ajude.

Nick Panov
fonte
8

O padrão CSS permite alguma formatação avançada. Existe uma diretiva @page no CSS que permite alguma formatação que se aplica apenas a mídia paginada (como papel). Consulte http://www.w3.org/TR/1998/REC-CSS2-19980512/page.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 current printer page size */
            margin: 0mm;  /* this affects the margin in the printer settings */
        }

        body 
        {
            background-color:#FFFFFF; 
            border: solid 1px black ;
            margin: 0px;  /* the margin on the content before printing */
       }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>
Expandir snippet

e para o Firefox use-o

No Firefox, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (visualizar código-fonte da página :: tag HTML).

Em seu código, substitua <html>por<html moznomarginboxes mozdisallowselectionprint>.

Hossein Ghaem
fonte
4 
@media print {
    .footer,
    #non-printable {
        display: none !important;
    }
    #printable {
        display: block;
    }
}
Sheak Abdulla
fonte
Essa parece ser a maneira correta de fazer isso. Mesmo no meu caso em um contexto iframe, funciona muito bem.
TwystO de
2

Esta será a solução mais simples. Tentei a maioria das soluções na internet, mas só isso me ajudou.

@print{
    @page :footer {color: #fff }
    @page :header {color: #fff}
}
Yasitha
fonte
11
Isso não faz nada.
noites de
1

@page { margin: 0; }funciona bem no Chrome e Firefox. Não encontrei uma maneira de consertar o IE por meio de css. Mas você pode entrar em Configuração de página no IE em sua própria máquina em e definir as margens como 0. Pressione alt e o menu de arquivo no canto superior esquerdo e você encontrará Configuração de página. Isso só funciona para uma máquina de cada vez ...

Sammi
fonte
0

1. Para Chrome e IE

<script language="javascript">
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.getElementById('header').style.display = 'none';
document.getElementById('footer').style.display = 'none';
document.body.innerHTML = printContents;

window.print();


document.body.innerHTML = originalContents;
}

</script>
<div id="div_print">
<div id="header" style="background-color:White;"></div>
<div id="footer" style="background-color:White;"></div>
</div>
  1. Para FireFox, como l2aelba disse ,

Adicione o atributo moznomarginboxes no Exemplo:

<html moznomarginboxes mozdisallowselectionprint>
Nikhilus
fonte
No código acima, os <div id = "header" style = "background-color: White;"> </div> <div id = "footer" style = "background-color: White;"> </div> são opcionais .
Nikhilus
0

Eu estava tentando remover o cabeçalho e o rodapé de uma página html que imprimi manualmente.

Nenhuma solução nesta página funcionou para mim, mas simplesmente definindo meu próprio rodapé conforme explicado aqui, o Firefox não adicionaria seu próprio cabeçalho e rodapé.

Isso não funciona no Chrome, infelizmente.

Em CSS:

@media screen {
  div.divFooter {
    display: none;
  }
}
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
}

Adicione isto ao seu HTML:

<div class="divFooter">
<p>UNCLASSIFIED</p>
</div>
``
lwinkler
fonte
-1

Se acontecer de você rolar para baixo até este ponto, encontrei uma solução para o Firefox. Ele imprimirá o conteúdo de um div específico sem os rodapés e cabeçalhos. Você pode personalizar como desejar.

Em primeiro lugar, baixe e instale este addon: JSPrintSetup .

Em segundo lugar, escreva esta função: 

<script>
function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');
    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write(elem);
    mywindow.document.write('</body></html>');
    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

   //jsPrintSetup.setPrinter('PDFCreator'); //set the printer if you wish
   jsPrintSetup.setSilentPrint(1);

   //sent empty page header
   jsPrintSetup.setOption('headerStrLeft', '');
   jsPrintSetup.setOption('headerStrCenter', '');
   jsPrintSetup.setOption('headerStrRight', '');

   // set empty page footer
   jsPrintSetup.setOption('footerStrLeft', '');
   jsPrintSetup.setOption('footerStrCenter', '');
   jsPrintSetup.setOption('footerStrRight', '');

   // print my window silently. 
   jsPrintSetup.printWindow(mywindow);
   jsPrintSetup.setSilentPrint(1); //change to 0 if you want print dialog

    mywindow.close();

    return true;
}
</script>

Em terceiro lugar, em seu código, onde quer que você queira escrever o código de impressão, faça isso (eu usei JQuery. Você pode usar javascript simples):

<script>
$("#print").click(function () {
    var contents = $("#yourDivToPrint").html();
    PrintElem(contents);
})
</script>

Obviamente, você precisa do link para clicar:

<a href="#" id="print">Print my Div</a>

E seu div para imprimir:

<div id="yourDivToPrint">....</div>
Josias
fonte
-3

você não precisa escrever nenhum código. pouco antes de chamar window.print () pela primeira vez, altere as configurações de impressão do navegador. por exemplo no firefox:

  1. Pressione Alt ou F10 para ver a barra de menu
  2. Clique em Arquivo e em Configurar página
  3. Selecione a guia Margens e Cabeçalho / Rodapés
  4. Alterar URL para em branco -> imagem

e um outro exemplo para o IE (estou usando o IE 11 para versões anteriores, você pode ver isso Impedir que o Firefox ou o Internet Explorer imprima o URL em todas as páginas ):

  1. Pressione Alt ou F10 para ver a barra de menu
  2. Clique em Arquivo e em Configurar página
  3. na seção Cabeçalhos e Rodapés Alterar URL para vazio.
Alireza Azami
fonte
Embora este link possa responder à pergunta, é melhor incluir as partes essenciais da resposta aqui e fornecer o link para referência. As respostas somente com link podem se tornar inválidas se a página vinculada mudar. - Da avaliação
SurvivalMachine
obrigado pela sugestão SurvivalMachine.
Editei
Hmmm ... Eu não gosto de ter que correr em volta de todos os meus usuários e atualizar seus navegadores (quantos eles usam) para levar em conta este aplicativo, especialmente se eles vivem do outro lado do planeta. Além disso, e se eles precisarem das configurações de outro aplicativo? Isso não é uma resposta.
Paul
Essa abordagem carece da funcionalidade de navegador cruzado que um recurso incorporado à página / aplicativo forneceria.
killscreen