Imprimir contenido HTML específico al hacer clic en un botón sin incluir la página web completa

Imprimir solo contenido HTML específico al hacer clic en un botón del usuario se puede lograr en varios maneras. Un método consiste en crear un elemento div oculto para contener el HTML deseado. Este div debe tener su propiedad de visualización configurada en "imprimir" para fines de impresión, mientras que su valor de visualización sigue siendo "ninguno" para la visualización en pantalla. Se pueden ajustar las propiedades de visualización de otros elementos de la página para que se muestren en la pantalla pero se oculten durante la impresión. Sin embargo, este método requiere una gestión meticulosa de las propiedades de visualización de todos los elementos de la página.

Un enfoque alternativo es crear una página web nueva y aislada que contenga únicamente el contenido HTML que se va a imprimir. Esta nueva página se puede cargar dinámicamente en un iframe oculto cuando el usuario hace clic en el botón Imprimir. Una vez que el iframe se haya cargado por completo, se puede activar la función de impresión del navegador y el HTML incrustado se imprimirá sin ningún elemento de página no deseado. Este método ofrece mayor flexibilidad y control dinámico sobre el proceso de impresión.

Aquí hay un ejemplo usando el segundo enfoque:

// 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 solución le permite imprimir contenido HTML específico cómodamente al hacer clic en el botón sin modificar la apariencia o el contenido de la página web principal. Garantiza que solo se imprima el HTML deseado, lo que brinda una experiencia de impresión más fácil de usar.