Czy kiedykolwiek spotkałeś się z sytuacją, w której musisz wydrukować treść określonego HTML i zapisać ją do wykorzystania w przyszłości? Na przykład konieczne jest przechowywanie przepisów na gotowanie lub projektowanie pomysłów z odpowiednich stron internetowych i korzystanie z tych informacji podczas pracy offline. W takich scenariuszach ważne jest, aby wiedzieć, jak wydrukować zawartość dowolnego elementu HTML.

Na tym blogu poznamy procedurę drukowania treści DIV za pomocą JavaScript.

Wydrukuj zawartość elementu DIV za pomocą JavaScript

Za pomocą podanego przykładu; Wykazamy procedurę drukowania treści „div" element. Zatem w poniższej sekcji zawiera kod HTML i jego opis.

Kod HTML

• Po pierwsze, użyjemy elementu DIV i ustawimy jego „ID" Jak "divcon„Co pomoże uzyskać treść w JavaScript.
• W następnym kroku ustawimy „jasny zółty”Jak„ „kolor tła”Z dodanego„div" element.
• W środku "div„Element, teraz dodamy nagłówek i akapit z„

  " I "

  ”Odpowiednie tagi HTML.

Wydrukuj zawartość elementu DIV za pomocą JavaScript

Teraz wydrukujemy zawartość elementu DIV za pomocą JavaScript w nowym oknie. Naciśnij poniższy przycisk i zobacz wynik.

Następnie dodamy przycisk, który wywołuje „printdivcontent ()”Funkcja JavaScript na swoim„Na kliknięcie" wydarzenie:

Wydrukować

Kod JavaScript
Aby wydrukować zawartość elementu HTML, takiego jak „div”, Musisz przechowywać jego dane w zmiennej. Teraz wykonamy następujące kroki podczas kodowania w JavaScript:

• Najpierw utworzymy funkcję o nazwie „printdivcontent ()".
• Następnie zdefiniuj zmienne o nazwie „ContentOfdiv" I "Newwin" w środku "printdivcontent ()”Funkcja.
• Korzystając z „divcon”Id, otrzymamy treść„div„Element HTML i przechowuj go w zmiennej”ContentOfdiv".
• Zmienny "Newwin”Będzie używany do otwarcia okna drukowania jako wyskakującego okienka.
• Następnie użyjemy „Newwin„Zmienna, aby wywołać metodę JavaScript”dokument.pisać()". W tej metodzie przekazamy znaczniki elementów HTML, które są dodawane do „Div”, które w zamian otrzymują zawartość określonych elementów.

Oto pełny kod dla powyższego przykładu:

funkcja printdivcontent ()
var contentOfDiv = Dokument.getElementById („divcon”).InnerHtml;
var newwin = okno.Open (",", 'wysokość = 650, szerokość = 650');
Newwin.dokument.pisać(");
Newwin.dokument.Write („Wydrukuj zawartość Div Element za pomocą JavaScript”);
Newwin.dokument.pisać('

Treść elementu DIV:
');
Newwin.dokument.Write (ContentOfDiv);
Newwin.dokument.pisać(");
Newwin.dokument.zamknąć();
Newwin.wydrukować();

Po uruchomieniu powyżej kodu HTML wynikowym wyjściem w przeglądarce będzie:

Kliknięcie „Wydrukować”Przycisk zadzwoni do JavaScript„printdivcontent ()”Funkcja i następujące okno pojawią się na ekranie:

Jak widać, pomyślnie uzyskaliśmy dostęp do treści dodanej „div" element:

Podaliśmy wszystkie niezbędne informacje na temat drukowania treści „div”Element za pomocą JavaScript.

Wniosek

Wydrukować treść „div„Element, po pierwsze, musisz przypisać„ID”W HTML przechowuj swoje dane w zmiennej, uzyskując dostęp do określonego„ id ”w kodzie JavaScript. Podczas programowania w JavaScript pojawiają się sytuacje, w których konieczne jest wydrukowanie określonego segmentu strony internetowej. W takich przypadkach nasza dostarczona metoda może ci pomóc. W tym blogu omówiono procedurę drukowania treści DIV za pomocą JavaScript.