Print HTML page keeping the CSS of the page

Question

Print HTML page keeping the CSS of the page

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

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 div <div id="pdf2htmldiv">...</div> where I call via javascript for printing. But the page is displayed for printing without the style of the page. Do you have any way to print this report as it appears 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" />

Page Content:

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

Report:

Reporttoprint:

The stylo of the zebrada table does not appear even the edges of the report. Can I print according to the first image?

javascript c# webforms

asked by anonymous 07.03.2018 / 20:27

2 answers

Operations with dates Convert an object that implements the interface, in its own interface

score 2 · Answer 1

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

AsalreadydiscussedinthesetwoquestionstheprinterbyDefaultdidnotprintanythingthatisbackgroundinCSS,neitherimages,norcolors,oranything.

Print page with Background

Apply watermark without affecting the text

But there are techniques that can solve this problem. As I'll 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 printout. The technique is to apply a box-shadow to the cell, so you can put the color you want and it will appear in the print without problems.

You can test here by giving 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>

Result of printing with the above code, notice the red box!

IfyouwanttosimulatehowyourimpressionisgoingtogorightonthepagewithouthavingtopressCtrl+PallthetimejustenableChrome's"Print Preview" directly by typing < kbd> F12 :

score 1 · Answer 2

See the example as you requested. Note: If it does not work here on the stack, get 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>