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 :
<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.
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>
Ajoutez la ligne suivante au champ
de votre document HTML :<code class="html"><link rel="stylesheet" href="print.css" media="print"></code>
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!