Heim > Web-Frontend > HTML-Tutorial > Wie füge ich eine Schaltfläche zum Drucken einer HTML-Seite hinzu?

Wie füge ich eine Schaltfläche zum Drucken einer HTML-Seite hinzu?

王林
Freigeben: 2023-09-13 14:33:02
nach vorne
1875 Leute haben es durchsucht

Wie füge ich eine Schaltfläche zum Drucken einer HTML-Seite hinzu?

Fügen Sie auf der HTML-Webseite eine Schaltfläche „Drucken“ hinzu. Wenn Sie darauf klicken, wird die gesamte Webseite gedruckt. Dies ist eine relativ einfache Funktion, die einer Webseite hinzugefügt werden kann und mit wenigen HTML-Elementen und reinem JavaScript hinzugefügt werden kann.

Lasst uns also Möglichkeiten besprechen, dies zu tun.

Methode

  • Fügen Sie zunächst das -Tag im HTML-Dom hinzu.

  • Weisen Sie das Typattribut „button“ zu und geben Sie ihm einen Wert.

  • Dann weisen Sie der Eingabe einen „onclick“-Handler zu, der mit JavaScript verarbeitet wird.

  • Die Funktion, die Klickereignisse für Eingabeetiketten verarbeitet, ist wie folgt: -

const handlePrint = () => {
   window.print();
}
Nach dem Login kopieren

Der vollständige Code dieser Methode lautet -

Beispiel

<!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>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie füge ich eine Schaltfläche zum Drucken einer HTML-Seite hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage