3

Boa tarde pessoal, tenho um relatório que é gerado em um pagina aspx com bootstrap e CSS. O conteúdo do relatório fica dentro de uma div <div id="pdf2htmldiv">...</div> onde chamo via javascript para impressão. Mas a pagina é apresentada para impressão sem o style da pagina. Tem alguma forma de imprimir esse relatório conforme é apresentado com o style CSS?

Código javascript:

<script>
        function printDiv(divName) {
            var printContents = document.getElementById(divName).innerHTML;
            var originalContents = document.body.innerHTML;

            document.body.innerHTML = printContents;

            window.print();

            document.body.innerHTML = originalContents;
        }
    </script>

Chamada do botão:

<input type="button" onclick="printDiv('pdf2htmldiv')" value="Imprimir" />

Conteúdo da pagina:

<div id="pdf2htmldiv">
\\conteúdo do relatório
</div>

Relatório: inserir a descrição da imagem aqui

Relatório na impressão: inserir a descrição da imagem aqui

O stylo da tabela zebrada não aparece nem as bordas do relatório. Consigo imprimir conforme a primeira imagem?

11
  • Vc quer fazer isso sem ir nas opções do navegador para imprimir gráficos de segundo plano?
    – Sam
    7/03/2018 às 19:59
  • Olha, pode ser um caso de opções de impressão como o comentário do @dvd indica, ou pode ser que o css que está usando não possa ser impresso. Poste o código css e ficará mais fácil 7/03/2018 às 20:44
  • 1
    Cara, então nesse caso acredito que dentro do @media print, deve colocar as cores como o bootstrap põe. Não dá pra reaproveitar, pq eles devem estar usando algo que não seja compatível. Acha que consegue? 7/03/2018 às 20:53
  • 1
    Acho que talvez não role assim. Talvez tenha que fazer na mão usando :nth-child(2n+1) ou algo do gênero. Manja? 7/03/2018 às 20:57
  • 1
    Coloquei um exemplo. QQr coisa fala 8/03/2018 às 13:17

2 Respostas 2

2

Vou dar uma resposta que pode te ajudar sem vc ter que depender do usuário escolher imprimir os "Gráficos de Segundo Plano"

inserir a descrição da imagem aqui

Como já discutido nessas duas perguntas a impressora por Default não imprimi nada que for background no CSS, nem imagens, nem cores, nem nada.

Imprimir página com Background

Aplicar marca d'água sem afetar o texto

Porém existem técnicas que podem resolver esse problema. Como vou mostrar abaixo.

O primeiro passo é criar o seu CSS exclusivo que só vai usando o @print

Veja o exemplo abaixo funcionando, a cor vai ficar vermelha na impressão. A técnica é aplicar um box-shadow para dentro da célula, assim vc pode colocar a cor que quiser e vai aparecer na impressão sem problemas.

Pode testar por aqui mesmo dando o Ctrl+P que vai funcionar!

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

table thead tr th {
    background: greenyellow; /* cor antes da impressão */
}

@media print{
  table thead tr th{
    box-shadow: 0 0 0 1000px red inset;  /* cor para impressão */
  }
}
<div class="container">
    <table border="1">
        <thead>
            <tr>
                <th>Item 1</th>
                <th>Item 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Texto 1</td>
                <td>Texto2</td>
            </tr>
        </tbody>
    </table>
</div>

Resultado da impressão com o código acima, repare no box vermelho!

inserir a descrição da imagem aqui

Se vc quiser simular como a sua impressão vai ficar direto nã página sem precisar ficar apertando Ctrl+P toda hora basta habilitar o "Print Preview" direto pelo Dev Tools do Chrome dessa forma, aperte F12:

inserir a descrição da imagem aqui

2
  • Vou fazer novos testes.
    – Evandro
    8/03/2018 às 14:32
  • Evandro use o @print para sobrescrever os estilos que vc quer que só apareçam na impressão. Depois em dodos os lugares que tiver background-color vc coloca o box-shadow com inset conforme no exemplo da minha resposta que vc não terá problemas com cor de bg na impressão.
    – hugocsl
    8/03/2018 às 14:41
1

Veja o exemplo como pediu. Obs.: Caso não funcione aqui no stack, pegue o código e ponha num html local. Vai funcionar...

@media print{
  table tbody tr:nth-child(2n+1){
    background: #CCC;
  }
}
<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Nome</th>
      <th>E-mail</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Fulano 1</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Fulano 2</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Fulano 3</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Fulano 4</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Fulano 5</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

3
  • Diego por padrão as impressoras não imprimem "Gráficos de Segundo Plano" inclusive imagens e cores. Na verdade nada que é background no CSS vai para a impressão. Muito provavelmente seu código não funciona a não ser que vc (Manualmente) tenha escolhido essa opção na hora de imprimir, o que o usuário normal não faria! Teste seu código com a opção desmarcada e vc vai ver isso!
    – hugocsl
    8/03/2018 às 13:36
  • Então, é sobre isso os comentários na pergunta dele inclusive. Ele tentou marcar a opção de imprimir gráficos e não estava indo mesmo assim. testei meu código e com a opção marcada ele funciona. Agora é óbvio, com o gráfico desativado não funcionará. Porém isso já foi discutido acima @hugocsl 8/03/2018 às 13:38
  • 1
    @DiegoSantos Vou fazer novos testes.
    – Evandro
    8/03/2018 às 14:30

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 .