Comment imprimer uniquement un élément HTML spécifique à l'aide de CSS ?

Comment imprimer uniquement un élément HTML spécifique

La tâche d'imprimer uniquement un élément HTML spécifique, tel qu'un div, se pose souvent dans développement web. Cependant, y parvenir sans désactiver la visibilité des autres contenus de la page peut s'avérer difficile.

Pour résoudre ce problème, il existe une solution CSS qui permet d'imprimer l'élément souhaité tout en masquant le reste de la page. En implémentant le code suivant, vous pouvez spécifier que la page entière devient invisible lors de l'impression, à l'exception du div que vous souhaitez imprimer :

@media print {
  body {
    visibility: hidden;
  }
  #section-to-print {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
  }
}

Dans ce code, le div que vous souhaitez imprimer se voit attribuer l'ID "section à imprimer." Lorsque le navigateur passe en mode d'impression (qui est déclenché par la commande d'impression de l'utilisateur), la règle @media spécifiée devient active.

Cette règle définit la propriété de visibilité de la balise body sur "cachée", affichant tous les éléments de la page. invisible. Cependant, la visibilité du div avec l'ID "section-to-print" est explicitement définie sur "visible".

De plus, pour garantir une impression correcte, le div est positionné de manière absolue et placé dans le coin supérieur gauche. de la page. Cela garantit qu'il apparaît à l'emplacement souhaité lors de l'impression.

En utilisant cette méthode, vous pouvez imprimer sélectivement un div spécifique sans avoir besoin de boîtes de dialogue supplémentaires ni de manipulation de la structure de la page. Il offre une solution propre et efficace pour les situations où l'impression d'un élément HTML spécifique est requise.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!