Maison  >  Article  >  interface Web  >  Comment imprimer uniquement le contenu HTML sélectionné en cliquant sur un bouton ?

Comment imprimer uniquement le contenu HTML sélectionné en cliquant sur un bouton ?

Barbara Streisand
Barbara Streisandoriginal
2024-10-27 03:13:29737parcourir

How to Print Only Selected HTML Content on Button Click?

Impression sélective du contenu HTML en cliquant sur un bouton

Les développeurs Web rencontrent souvent le besoin de permettre aux utilisateurs d'imprimer des sections spécifiques d'une page Web sans inclure tout le contenu de la page. Dans ce contexte, la question se pose :

Comment imprimer uniquement le contenu HTML sélectionné lorsqu'on clique sur un bouton, en excluant le reste de la page ?

Solution :

La solution suggérée pour conserver le contenu HTML caché dans un affichage : print div est une approche valable. Il existe cependant une méthode plus simple et plus efficace :

Créer une feuille de style d'impression :

  1. Créez un fichier CSS nommé "print.css" contenant les éléments suivants code :
<code class="css">@media print {
  .noPrint {
    display: none;
  }
}</code>

Ce code masquera les éléments avec la classe "noPrint" lorsque la page est imprimée.

  1. Appliquer la classe NoPrint :

Identifiez le contenu HTML qui ne doit pas être imprimé et ajoutez la classe "noPrint" à ces éléments, comme par exemple :

<code class="html"><h1 class="noPrint">No Print</h1></code>
  1. Inclure le Feuille de style d'impression :

Ajoutez la ligne suivante au champ de votre document HTML :

<code class="html"><link rel="stylesheet" href="print.css" media="print"></code>
  1. Ajoutez le bouton d'impression :

Créez un bouton qui déclenche la boîte de dialogue d'impression lorsque vous cliquez dessus :

<code class="html"><button onclick="window.print()">Print</button></code>

Explication :

Lorsque vous cliquez sur le bouton d'impression, la méthode window.print() est appelée, ouvrant la boîte de dialogue d'impression du navigateur. La requête CSS media @media print { ... } est déclenchée, provoquant le masquage des éléments avec la classe "noPrint". De ce fait, seul le contenu HTML souhaité est imprimé.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn