ti-enxame.com

Imprimir um cabeçalho para todas as páginas do Google Chrome

Estou criando uma programação de TV e não deve haver problemas de impressão em pelo menos um navegador padrão.

Preciso colocar o logotipo e o título e os cabeçalhos das tabelas em todas as páginas. Após dias de tentativas e pesquisas, descobri que Chrome não imprimiria cabeçalhos de tabelas e position: fixed elementos em todas as páginas por causa disso bug conhecido .

Devido aos recursos, como imprimir cores de fundo com -webkit-print-color-adjust: exact que usei bastante e alterei as bordas da página com CSS @page propriedade, personalizei minha visualização para usar o Google Chrome, mas agora que vejo que ela não pode imprimir cabeçalhos, estou procurando alternativas alternativas:

  • Para esquecer o Chrome e começar a criar a visualização de impressão para outro navegador que precise fazer ajustes para imprimir as cores do plano de fundo e alterar as margens da página (acho que não é possível)).
  • Para encontrar uma solução CSS/JS para tornar o Google chrome para imprimir cabeçalhos de tabelas em todas as páginas).

TL; DR: Você conhece algum jQuery/JavaScript/etc. código para imprimir cabeçalhos de tabela em todas as páginas do Chrome?

15
Farid Rn

Sim, isso é uma coisa do Webkit/Chrome. Não imprimirá o cabeçalho em cada página. FF, por exemplo. O que você pode fazer para obter algo assim é usar quebra de página.

A quebra de página funciona apenas em elementos de bloco, portanto, você deve estilizar seus trs de acordo.

Como isso:

tr{
    display:block;
}

Agora, você deve começar a copiar seu cabeçalho e colocá-lo a cada X linha com javascript:

var head = $('table thead tr');
$( "tbody tr:nth-child(10n+10)" ).after(head.clone());

Na tela, você não quer todas essas cabeças. Remova-os com uma consulta de mídia (por conveniência, adicionei uma classe .head na minha linha th> tr .:

@media screen {
    tbody .head{
        display: none;
    }
}

Agora, antes de cada .head, faça a quebra de página:

tbody tr.head {
    page-break-before: always;
    page-break-inside: avoid;
}

Confira aqui: http://jsfiddle.net/jaap/7ZGVv/2/ Lembre-se de que o jsfiddle não permite que você abra apenas o quadro de visualização, para que a impressão não funcione em outros lugares, combine tudo em seu próprio arquivo e você verá que as tabelas serão divididas, o estilo não é perfeito e não é tão flexível quanto o próprio navegador decidir onde dividir, mas, ei, é alguma coisa.

12
Jaap

Tenho postou uma solução aqui que resolve esse problema e não exige que você tente antecipar as quebras de página naturais com quebras de página forçadas (uma técnica que é inerentemente não confiável e tende a desperdiçar papel).

2
DoctorDestructo

Essa solução não funcionará exatamente para cabeçalhos de tabela, mas permitirá cabeçalhos de html arbitrário. Eu criei uma biblioteca que permite Chrome para imprimir cabeçalhos e rodapés, consulte esta resposta .

1
lastmjs