Print HTML page keeping the page CSS

Question

Print HTML page keeping the page CSS

Good afternoon guys, I have a report that is generated on a page aspx with bootstrap and CSS. The content of the report is inside a div <div id="pdf2htmldiv">...</div> where I call via javascript for printing. But the page is presented for printing without the style of the page. Do you have any way to print this report as presented with 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 page:

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

Report:

Report in print:

The stylo in the table zebrada does not even appear the edges of the report. Can I print as per the first image?

3

c#javascript webforms

Author: Evandro, 2018-03-07

Source

2 answers

score 2 · Answer 1

I'll give you an answer that can help you without you having to depend on the user choosing to print the"background Graphics"

As already discussed in these two questions the printer by default I did not print anything that is background in CSS, neither images, nor 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 on printing. 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 print without problems.

You can test right here by giving Ctrl + P which 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 code above, notice the red box!

If you want to simulate how your print will look straight on the page without having to press Ctrl + P every hour just enable the" Print Preview " straight through Chrome's Dev Tools in this way, Press F12 :

score 1 · Answer 2

See the example as requested. Obs.: If it doesn't work here in the stack, take the code and put it in a local html. It'll 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>