Impression de contenu HTML spécifique lors d'un clic sur un bouton sans inclure la page Web complète

L'impression uniquement d'un contenu HTML spécifique lors d'un clic sur un bouton d'un utilisateur peut être réalisée de différentes manières façons. Une méthode consiste à créer un élément div caché pour contenir le code HTML souhaité. Ce div doit avoir sa propriété d'affichage définie sur « imprimer » à des fins d'impression, tandis que sa valeur d'affichage reste « aucun » pour l'affichage à l'écran. Les propriétés d'affichage des autres éléments de la page peuvent être ajustées pour s'afficher à l'écran mais se masquer lors de l'impression. Cette méthode nécessite cependant une gestion méticuleuse des propriétés d'affichage de tous les éléments de la page.

Une approche alternative consiste à créer une nouvelle page Web isolée contenant uniquement le contenu HTML à imprimer. Cette nouvelle page peut être chargée dynamiquement dans une iframe cachée lorsque l'utilisateur clique sur le bouton d'impression. Une fois l'iframe entièrement chargé, la fonction d'impression du navigateur peut être déclenchée et le code HTML intégré sera imprimé sans aucun élément de page indésirable. Cette méthode offre une plus grande flexibilité et un contrôle dynamique sur le processus d'impression.

Voici un exemple utilisant la deuxième approche :

// 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';

Cette solution vous permet d'imprimer facilement du contenu HTML spécifique en cliquant sur un bouton sans modifier l'apparence ou le contenu de la page Web principale. Il garantit que seul le code HTML prévu est imprimé, offrant ainsi une expérience d'impression plus conviviale.