PHP Botão para imprimir conteúdo de divs respectivas

[JefinhoCps]

Fala ae pessoal, bom dia beleza?

 

Estou com uma duvida e não estou conseguindo resolver, na verdade seguindo algumas dicas aqui do CH, consegui resolver parcialmente o problema, vamos a pergunta:

 

Eu tenho uma tela onde é gerado cards(div) de acordo com o retorno do banco de dados, exemplo cada um possui um número único.

Para tal utilizo o PHP, peguei uma dica aqui onde eu precisava imprimir os dados desse card individualmente cada um com sua respectiva informação.

vou colocar o script aqui:

esse é meu print na tela que é mostrado os cards com seus respectivos conteudos.

<div class='card border-primary mb-2 mr-1 col-md-12' id='conteudo'>
  <div class='card-header' style='font-weight: 600;'>Pedido Pendente - " . date('d/m/Y', strtotime($vDataPedido)) . "</div>
  <div class='card-body text-primary'>
    <h5 class='card-title'>Pedido nº $vnumeroPedido</h5>
    <p class='card-text'>
      <i class='faz fa-user'></i> Cliente: $vlogin <br /> 
    </p>
    <img src='img/whatsapp/whatsapp.png' alt='imagem whatsapp' style='width:30px;'/> Telefone: <a href='https://api.whatsapp.com/send?phone=55$vTelefone' target='_blank'>$vTelefone</a>
    <p class='card-text'>
    <hr> 
    <div>
      <h5>Quantidade | Descrição do produtos</h5>
      <p class='text-muted'>" . $vInfo . "</p>
    </div>
    <hr>
    <h5 class='card-title'><i class='faz fa-map-marked-alt'></i> Endereço para entrega </h5>
    $vEndereco, $vNumero - $vBairro - $vEstado <br /> <br />


    Forma de Pagamento: $formaPagamento <br /><br />
    <h5>Total a receber</h5>
    R$ $vTotalPagar <br/>

    </p>
  <hr>
  <p class='mt-3'>Para encerrar o pedido, clique no botão abaixo!</p>
  <input type='submit' name='selecionados[]' class='btn btn-warning btn-md btn-block' value='$vnumeroPedido'/>
  <input type='button' id='btnImprimir' value='Imprimir' class='btn btn-primary btn-md btn-block' name='imprimir' '/>
</div>
</div> 

 

e esse é um javascript que peguei aqui no CH (iSilvaMarcelo) :

 

<script>
        document.getElementById('btnImprimir').onclick = function() {
            var conteudo = document.getElementById('conteudo').innerHTML,
                tela_impressao = window.open('about:blank');

            tela_impressao.document.write(conteudo);
            tela_impressao.window.print();
            tela_impressao.window.close();
        }
    </script>

 

Exemplo da aplicação funcionando é:

 

Tenho o primeiro Card com o numero do pedido: 1

e tenho o segundo Card com o numero do pedido: 2

quando essa tela carrega esses dois cards eu clico no botão de imprimir o 1° ele me mostra a tela de impressão normal, mas quando clico no botão do 2º nada é mostrado, queria saber do pessoal que tem mais experiência como posso resolver esse problema?

 

fico no aguardo ai galera valeu por enquanto!

 

[joseph_dev]

Pelo que pude entender aí, esse trecho que monta os cards está gerando várias div com o mesmo id.

A solução mais rápida eu acho que é:

1- Gerar um id dinâmico com o número do pedido (Acredito que sejam únicos). Concatenando a string "conteudo-" com o vnumeroPedido.

2- Mudar a função imprimir. Concatenando com o vnumeroPedido passado por parâmetro.

3- Atribuir a função imprimir no onclick do input já passando o vnumeroPedido.

 

1

<div class='card border-primary mb-2 mr-1 col-md-12' id='conteudo-'.$vnumeroPedido.'>
...

 

2

<script>
  imprimir = function(vnumeroPedido) {
  var conteudo = document.getElementById('conteudo-'+vnumeroPedido).innerHTML,
      tela_impressao = window.open('about:blank');

  tela_impressao.document.write(conteudo);
  tela_impressao.window.print();
  tela_impressao.window.close();
}
</script>

 

3

<input type='button' value='Imprimir' class='btn btn-primary btn-md btn-block' onclick='imprimir($vnumeroPedido)' />

 

Só verifica a concatenação pois não tive como testar aqui.

 

*No seu código, a linha que tem o button imprimir tem uma aspas sobrando perto de onde fecha a tag. Remove ela.

[JefinhoCps]

Valeu meu camarada, só ajustei na concatenação e na chamada da função imprimir.

Agora ta certinho!

Cada Card imprimindo seu contéudo na boa!

Bom final de ano ai amigo!