Maison > Article > interface Web > Comment ajouter un bouton pour imprimer une page HTML ?

Comment ajouter un bouton pour imprimer une page HTML ?

王林avant: 2023-09-13 14:33:021780parcourir

Ajoutez un bouton "Imprimer" sur la page Web HTML, et lorsque vous cliquez dessus, la page Web entière sera imprimée. Il s'agit d'une fonctionnalité assez simple à ajouter à une page Web et peut être ajoutée à l'aide de quelques éléments HTML et de JavaScript pur.

Discutons donc des façons de procéder.

Méthode

Tout d'abord, ajoutez la balise dans le dom HTML.
Attribuez son attribut de type à "bouton" et donnez-lui une valeur.
Ensuite, attribuez un gestionnaire "onclick" à l'entrée qui sera gérée à l'aide de JavaScript.
La fonction qui gère les événements de clic sur l'étiquette d'entrée est la suivante -

const handlePrint = () => {
   window.print();
}

Le code complet de cette méthode est -

Exemple

<!DOCTYPE html>
<html lang="en-US">
<head>
   <title>
  	   Adding Print Button
   </title>
</head>
   <body style="color: black;">
      <h1>Hello World!</h1>
      <p>Welcome to my Website</p>
      <p>
         This website is built using plain JS and HTML.
      </p>
      <p>
      Okay Bye!!!
      </p>
      <input value='Print' type='button' onclick='handlePrint()' />
      <script type="text/javascript">
         const handlePrint = () => {
            var actContents = document.body.innerHTML;
            document.body.innerHTML = actContents;
            window.print();
         }
      </script>
   </body>
</html>

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!

JavaScript html 事件 dom input

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment couper la sortie audio d'une vidéo en HTML ?Article suivant：Comment couper la sortie audio d'une vidéo en HTML ?

Articles Liés

Voir plus