Print HTML page keeping the page CSS

Question

Good afternoon guys, I have a report that is generated on a page aspx with bootstrap and CSS. The content of the report is within a div <div id="pdf2htmldiv">...</div> where I call javascript for printing. But the page is presented for printing without the style page. Have some way to print this report as it is presented with the style CSS?

Javascript code:

<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>

Button call:

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

Content of the page:

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

Report:

Report in print:

The Stylo of the table zebrada not even the report borders. I can print according to the first image?

Answer 1

I will give an answer that can help you without you having to depend on the user choose to print the "Background Graphics"

As already discussed in these two questions the printer by Default I didn’t print anything background in CSS, neither images, colors, nor anything.

Print page with Background

Apply watermark without affecting text

But there are techniques that can solve this problem. As I will show below.

The first step is to create your unique CSS that will only use @print

See the example below working, the color will turn red in the print. The technique is to apply a box-shadow into the cell, so you can put the color you want and it will appear in the printing smoothly.

You can test right here by giving the Ctrl+P that will work!

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>

Print result with the above code, note the red box!

If you want to simulate how your print will go straight on the page without having to press Ctrl+P all the time just enable the "Print Preview" direct by Chrome Dev Tools so press F12:

Answer 2

Take the example you asked for. Note: If it doesn’t work here in the stack, take the code and put it in a local html. It will work...

@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>