1

Pessoal em meu projeto utilizo MVC, no front end utilizo angular/html/js, etc. Preciso imprimir um relatorio, qual a melhor forma de fazer? quais ferramentas utilizar?

fiz um teste usando esse codigo:

$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();
    };
}

porem estou tendo dificuldade com a seguinte situação, tenho esse h3:

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

mesmo a variavel cons_obs.length sendo == -1, na impressão aparece "Observações".

imagino que tenha alguma forma/ferramente que seja mais adequado.

1
  • Conseguiu resolver? Commented 28/02/2018 às 10:59

2 Respostas 2

1

Se a opção do display:none não funcionar por causa do Angular, vc pode simplesmente mover o <h3> para fora da tela de impressão. Dessa forma!

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>


Vc também pode habilitar a "visualização de impressão" pelo Chrome no Dev Tools conforme essa imagem. Ai fica mais fácil para vc ir ajustando seu CSS apenas no formato Print

inserir a descrição da imagem aqui

1
  • Boa observação tinha esquecido do Angular. Commented 1/02/2018 às 11:57
1

Em seu CSS adicione a query @media print com a classe nao-imprimir e depois adicione ela aos elementos que você quer esconder durante a impressão.

$('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>

3
  • Leandro, continua exibindo "Observações", mesmo no executar codigo da sua resposta Commented 1/02/2018 às 10:35
  • é por causa do preview, coloque em arquivo html e verifique Commented 1/02/2018 às 10:55
  • Coloquei um botão de imprimir para demonstrar Commented 1/02/2018 às 11:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .