Início / coding / Perguntas / 79556976
Accepted
ND_Coder
Asked: 2025-04-05 20:49:00 +0800 CST

"@media print" - O código QR aparece com CTRL-P, mas não com window.print()

  • 772

Gostaria de adicionar um código QR quando alguém imprime uma página do nosso site. Adicionei o seguinte CSS incorporado:

@media print {
    body:after {
        content: "Convenient QR code to return to this page ..." url(https://image-charts.com/chart?chs=100x100&cht=qr&chl=https://<?=$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];?>&choe=UTF-8);
    }
}

Isso está funcionando perfeitamente quando alguém usa CTRL-P e o texto e o código QR aparecem na parte inferior da página. No entanto, quando alguém usa o botão que forneço para "Printer Friendly" — que simplesmente executa window.print() — tudo o que aparece na parte inferior da página é o texto... nenhum código QR. Tentei imprimir a página pensando que poderia ser um problema de visualização de impressão, mas o código QR não apareceu na página (Observação: ao imprimir usando CTRL-P, o código QR aparece).

Em essência, estou perguntando por que há uma diferença entre CTRL-P e window.print() e o que posso fazer para corrigir a situação. Procurei soluções e encontrei apenas algumas referências no Stack Overflow ( 53758720 e 7928963 ), mas elas não estavam abordando o mesmo problema. Qualquer ajuda será apreciada.

javascript

2 respostas

  1. Best Answer

    Você precisa garantir que a imagem tenha sido carregada antes que a função de impressão seja executada (ou seja, antes que o estilo do conteúdo ocorra).

    Uma maneira de fazer isso é torná-lo a origem de um elemento img, que então não é exibido.

    Aqui está um exemplo simples:

    <style>
  @media print {
    body::after {
      content: "Convenient QR code to return to this page ..." url(https://image-charts.com/chart?chs=100x100&cht=qr&chl=https://stackoverflow.com&choe=UTF-8);
    }
  }
</style>

<body>
  <img src="https://image-charts.com/chart?chs=100x100&cht=qr&chl=https://stackoverflow.com&choe=UTF-8">
  <button onclick="window.print();">Print</button>
  <script>
    document.querySelector('img').style.display = 'none';
  </script>

</body>

    Nota: o serviço que fornece o código QR pode levar algum tempo para criar a imagem e servi-la a você, então eu não confiaria em um timeout para garantir que ele seja carregado. Você provavelmente deve arrumar o código acima esperando um evento de carregamento para um pedaço de código de produção.

    • 2

  2. Dispara a resposta com um atraso para que o DOM a reconheça.

      <script>
function printPage() {
  // Optional: force visibility early
  const qr = document.getElementById('qr-code');
  qr.style.display = 'block';  // help some browsers render before print

  // Delay to ensure DOM updates and QR loads
  setTimeout(() => {
    window.print();
  }, 200);
}
</script>
    • 0

relate perguntas