doubts with web printing

Question

doubts with web printing

Navigation

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

1

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

I tested it 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();
    };
}

But I'm having difficulty with the following situation, I have this h3:

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

Even if the variable cons_obs.length is == -1, "Remarks" appears in the printout.

I imagine you have some form / tool that is most appropriate.

html angularjs pdf

asked by anonymous 01.02.2018 / 10:50

2 answers

Add spaces to the end of the field - python how could I use instead of passing an id, passing a Class on JQUERY?

score 1 · Answer 1

If the display:none option does not work because of the Angular, you can simply move <h3> off the print 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 Chrome's "print preview" in Dev Tools as this image. It's easier for you to adjust your CSS just in Print

score 1 · Answer 2

In your CSS add the query @media print with class nao-imprimir e then add it to the elements you want to hide while 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><divid="content">
  <p>teste</p>
  <h3 class="nao-imprimir">Observações</h3>
  <p>teste</p>
</div>

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