5

Preciso fazer uma página que, quando o usuário imprima, saia exatamente como ela é vista na tela (com os estilos), estou utilizando Bootstrap versão 3.1.

Existe algum plugin em Javascript que faça isso? A solução que pensei foi ao invés de pegar o código-fonte, gerar um print do conteúdo, existe outras maneiras para fazer isso?

Exemplo de como fica o StackOverflow no modo de impressão (Chrome) Print do SO

2
  • 1
    Compartilhe conosco o trecho de HTML e CSS que deseja imprimir. Ficará mais fácil de ajudar.
    – Eliezer
    14/04/2014 às 17:11
  • @EliezerBernart É uma GridView eu queria imprimir a cor do cabeçalho exatamente como ele é visualizado na browser. Achei a solução mas apenas para o Chrome. Acrescentei uma resposta, de uma olhada.
    – Laerte
    14/04/2014 às 17:21

2 Respostas 2

6

Se você deseja que o estilo de impressão seja o mesmo para todas as visualizações da sua página é possível utilizar o media="all".

<link media="all" rel="stylesheet" type="text/css" href="style.css">

Caso esteja utilizando o estilo através da tag <style> pode fazer da seguinte maneira:

@media all {
    \** Seu css **\
}

Espero que lhe ajude!

Update

O Twitter Bootstrap traz uma pré-configuração do @media print

* {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

Portanto tudo que você imprimir ficará sem cor, ou melhor, transparente. Altere essas configurações no seu arquivo do bootstrap, ou remova completamente e veja os resultados.

Por fim, seu navegador também precisa estar com as opções de impressão em cores habilitada na janela de Propriedades de Impressão:

Exemplo no Mozilla Firefox:

Habilitando impressão das cores de fundo

2
  • Como mencionei na postagem já tentei isso!
    – Laerte
    14/04/2014 às 16:30
  • @Laerte Update!
    – Eliezer
    14/04/2014 às 17:52
0

Pesquisando achei a propriedade -webkit-print-color-adjust que infelizmente só funciona no Chrome, mas minha pergunta é focada numa solução que funcione nos principais navegadores (vou continuar pesquisando, aceito contribuições!)

body {
     -webkit-print-color-adjust: exact;
}

Segundo a definição da MDN: A propriedade -webkit-print-color-adjust é uma extensão não padronizada do CSS, que pode ser usado para forçar a impressão de cores e imagens de fundo em navegadores baseados no motor WebKit, fiz um exemplo aqui.

No meu projeto utilizei também a propriedade !important para o browser sacar qual é a cor prioritária.

Referências:
Force Accurate Colors When Printing Web Pages
How to force an element's background to be printed in Webkit
Background color not showing in print preview

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .