Haben Sie jemals auf eine Situation gestoßen? Zum Beispiel ist es erforderlich, die Kochrezepte oder das Entwerfen von Ideen aus den jeweiligen Websites zu speichern und diese Informationen zu verwenden, während sie offline arbeiten. In solchen Szenarien ist es wichtig, dass Sie wissen, wie Sie den Inhalt eines beliebigen Elements von HTML drucken können.

In diesem Blog lernen wir das Verfahren zum Drucken des Inhalts des DIV -Elements mit Hilfe von JavaScript kennen.

Drucken Sie den Inhalt eines DIV -Elements mit JavaScript aus

Mit Hilfe des untergegebenen Beispiels; Wir werden das Verfahren zum Drucken des Inhalts eines „demonstrieren“ demonstrierendiv" Element. Der folgende Abschnitt umfasst also den HTML -Code und seine Beschreibung.

HTML Quelltext

• Erstens werden wir ein Div -Element verwenden und seine festlegen “Ausweis" als "DivconDas wird dazu beitragen, seinen Inhalt in JavaScript zu erhalten.
• Im nächsten Schritt werden wir festlegen “hellgelb" als die "Hintergrundfarbe”Der hinzugefügten“div" Element.
• Im Inneren "div"Element, wir werden jetzt eine Überschrift und einen Absatz mit" mit "hinzufügen"

  " Und "

  ”Jeweils HTML -Tags.

Drucken Sie den Inhalt eines DIV -Elements mit JavaScript aus

Jetzt drucken wir den Inhalt eines DIV -Elements mit JavaScript in einem neuen Fenster aus. Drücken Sie die folgende Taste und sehen Sie das Ergebnis an.

Dann werden wir eine Schaltfläche hinzufügen, die das aufruft “printDivContent ()"JavaScript -Funktion auf seiner"ONCLICK" Fall:

Drucken

JavaScript -Code
Um den Inhalt eines HTML -Elements wie "zu drucken" druckendiv”, Sie müssen ihre Daten in einer Variablen speichern. Jetzt werden wir die folgenden Schritte ausführen, während wir in JavaScript codieren:

• Erstens werden wir eine Funktion namens erstellen “printDivContent ()”.
• Definieren Sie dann Variablen, die benannt sind “Contentofdiv" Und "Newwin”Im Inneren“printDivContent ()”Funktion.
• Durch Verwendung der “Divcon"ID, wir erhalten den Inhalt der"div"HTML -Element und speichern Sie es in der Variablen"Contentofdiv”.
• Variabel “NewwinWird verwendet, um das Druckfenster als Popup zu öffnen.
• Dann werden wir das verwenden “Newwin"Variable, um die JavaScript -Methode aufzurufen"dokumentieren.schreiben()”. In dieser Methode werden wir die Tags der HTML -Elemente übergeben, die in „DIV“ hinzugefügt werden, die im Gegenzug den Inhalt der angegebenen Elemente erhalten.

Hier ist der vollständige Code für das oben gegebene Beispiel:

Funktion printDivContent ()
var contentofDIV = Dokument.GetElementById ("Divcon").Innerhtml;
var newwin = Fenster.Open (",", 'Höhe = 650, Breite = 650');
Newwin.dokumentieren.schreiben(");
Newwin.dokumentieren.Schreiben ('Inhalt des Div -Elements drucken mit JavaScript');
Newwin.dokumentieren.schreiben('

Inhalt des Divelelements:
');
Newwin.dokumentieren.write (contentofdiv);
Newwin.dokumentieren.schreiben(");
Newwin.dokumentieren.schließen();
Newwin.drucken();

Nach dem Laufen über den HTML -Code ist der resultierende Ausgang im Browser:

Klicken Sie auf “Drucken"Die Schaltfläche ruft das JavaScript an"printDivContent ()Die Funktion und das folgende Fenster wird auf dem Bildschirm angezeigt:

Wie Sie sehen können, haben wir erfolgreich auf den Inhalt der hinzugefügten Zugriffe zugegriffen. “div" Element:

Wir haben alle notwendigen Informationen über das Drucken des Inhalts eines „geliefert“divElement mit JavaScript.

Abschluss

Um den Inhalt eines "zu drucken"div"Element, zuerst müssen Sie eine zuweisen"AusweisSpeichern Sie in HTML seine Daten in einer Variablen, indem Sie auf die angegebene „ID“ im JavaScript -Code zugreifen. Während der Programmierung in JavaScript sind Situationen vorhanden, in denen es erforderlich ist, ein bestimmtes Segment einer Webseite zu drucken. In solchen Fällen kann Ihnen unsere bereitgestellte Methode Ihnen helfen. In diesem Blog wurde das Verfahren zum Drucken des Inhalts des Divelelements mit Hilfe von JavaScript erörtert.