Maison > interface Web > tutoriel CSS > le corps du texte

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

Barbara Streisand
Libérer: 2024-10-27 03:13:29
original
748 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion
  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>
Copier après la connexion
  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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!