doubt with web printing

Question

People in my project use MVC, on the front end use angular/html/js, etc. I need to print a report, what’s the best way to do it? what tools to use?

I ran a test using this code:

$scope.printReceita = function () {
    document.getElementById('btn1').onclick = function () {
        var conteudo = document.getElementById('receita').innerHTML,
            tela_impressao = window.open('about:blank');

        tela_impressao.document.write(conteudo);
        tela_impressao.window.print();
        tela_impressao.window.close();
    };
}

however I am having difficulty with the following situation, I have this H3:

<h3 ng-show="cons_obs.length > 1"> Observações</h3><br />

even the variable cons_obs.length being == -1, in the print appears "Remarks".

I imagine you have some form/tool that’s more suitable.

Answer 1

If the option of display:none does not work because of Angular, you can simply move the <h3> out of the printing screen. That way!

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
@media print {
    .leftmil {
        position: absolute;
        left: -10000px;
    }
}

@page {
  size: A4;
}

<h3>Obsevações Sem left 10000</h3>
<h3 class="leftmil">Obsevações com left 10000 no @print</h3>

---

You can also enable "print view" by Chrome in Dev Tools as per that image. Ai is easier for you to adjust your CSS only in Print format

Answer 2

In your CSS add the query @media print with class nao-imprimir and then add it to the elements you want to hide during printing.

$('button').click(function() {
  window.print();
});

@media print {
  .nao-imprimir,
  .nao-imprimir * {
    display: none !important;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <p>teste</p>
  <h3 class="nao-imprimir">Observações</h3>
  <p>teste</p>
</div>

<button class="nao-imprimir">imprimir</button>