Impressão de conteúdo HTML específico ao clicar no botão sem incluir a página da Web completa

A impressão apenas de conteúdo HTML específico ao clicar no botão de um usuário pode ser obtida de várias maneiras caminhos. Um método é criar um elemento div oculto para conter o HTML desejado. Esta div deve ter sua propriedade de exibição definida como 'print' para fins de impressão, enquanto seu valor de exibição permanece 'none' para exibição na tela. Outros elementos na página podem ter suas propriedades de exibição ajustadas para serem exibidas na tela, mas ocultadas durante a impressão. Este método, no entanto, requer um gerenciamento meticuloso das propriedades de exibição de todos os elementos da página.

Uma abordagem alternativa é criar uma nova página da Web isolada contendo apenas o conteúdo HTML a ser impresso. Esta nova página pode ser carregada dinamicamente em um iframe oculto quando o usuário clica no botão imprimir. Depois que o iframe estiver totalmente carregado, a função de impressão do navegador poderá ser acionada e o HTML incorporado será impresso sem quaisquer elementos de página indesejados. Este método oferece maior flexibilidade e controle dinâmico sobre o processo de impressão.

Aqui está um exemplo usando a segunda abordagem:

// Create an invisible iframe to hold the print-only HTML
const printFrame = document.createElement('iframe');
printFrame.style.display = 'none';
document.body.appendChild(printFrame);

// Dynamically load the print-only HTML into the iframe
printFrame.onload = function() {
  // Trigger the browser's print function once the print-only page is loaded
  window.print();
}
printFrame.src = 'print-only.html';

Esta solução permite que você imprima conteúdo HTML específico convenientemente ao clicar no botão, sem modificar a aparência ou o conteúdo da página principal. Ele garante que apenas o HTML pretendido seja impresso, proporcionando uma experiência de impressão mais amigável.