Hai mai incontrato una situazione in cui è necessario stampare il contenuto di un HTML specifico e salvarlo per un uso futuro? Ad esempio, è necessario archiviare le ricette di cucina o progettare idee dai rispettivi siti Web e utilizzare queste informazioni mentre si lavora offline. In tali scenari, è importante sapere come stampare il contenuto di qualsiasi elemento di HTML.

In questo blog, impareremo la procedura per stampare il contenuto dell'elemento Div con l'aiuto di JavaScript.

Stampa il contenuto di un elemento Div usando JavaScript

Con l'aiuto dell'esempio di seguito donati; Dimostreremo la procedura per stampare il contenuto di "div"Elemento. Quindi, la sezione seguente comprende il codice HTML e la sua descrizione.

Codice HTML

• In primo luogo, useremo un elemento div e imposteremo il suo "id" COME "Divcon"Il che aiuterà a ottenere i suoi contenuti in JavaScript.
• Nel prossimo passaggio, imposteremo "giallo chiaro" come il "colore di sfondo”Dell'Aggiunto"div"Elemento.
• Dentro il "div"Elemento, ora aggiungeremo un'intestazione e un paragrafo con"

  " E "

  "Rispettative tag HTML.

Stampa il contenuto di un elemento Div usando JavaScript

Ora stamperemo il contenuto di un elemento Div usando JavaScript in una nuova finestra. Premere il pulsante seguente e vedere il risultato.

Quindi aggiungeremo un pulsante che chiama "printDivContent ()"Funzione javascript sulla sua"Al clic"Evento:

Stampa

Codice JavaScript
Per stampare il contenuto di un elemento HTML come "div", È necessario archiviare i suoi dati in una variabile. Ora eseguiremo i seguenti passaggi durante la codifica in JavaScript:

• Innanzitutto, creeremo una funzione chiamata "printDivContent ()".
• Quindi, definisci le variabili denominate "ContentOfdiv" E "Newwin" dentro il "printDivContent ()" funzione.
• Usando il "Divcon"Id, otterremo il contenuto del"div"Elemento HTML e memorizzalo nella variabile"ContentOfdiv".
• Variabile "Newwin"Verrà utilizzato per aprire la finestra di stampa come popup.
• Allora useremo il "Newwin"Variabile per chiamare il metodo JavaScript"documento.scrivere()". In questo metodo, passeremo i tag degli elementi HTML che vengono aggiunti all'interno di "Div", che in cambio ottengono il contenuto degli elementi specificati.

Ecco il codice completo per l'esempio di cui sopra:

funzione printDivContent ()
var contentOfdiv = documento.getElementById ("DivCon").Innerhtml;
var newwin = finestra.aperto (",", 'altezza = 650, larghezza = 650');
Newwin.documento.scrivere(");
Newwin.documento.Scrivi ("Stampa contenuto dell'elemento Div usando JavaScript");
Newwin.documento.scrivere('

Contenuto dell'elemento div:
');
Newwin.documento.Scrivi (ContentOfdiv);
Newwin.documento.scrivere(");
Newwin.documento.vicino();
Newwin.stampa();

Dopo aver eseguito sopra il codice HTML, l'output risultante sul browser sarà:

Clicking the “Stampa"Il pulsante chiamerà JavaScript"printDivContent ()"La funzione e la seguente finestra appariranno sullo schermo:

Come puoi vedere, abbiamo accettato con successo il contenuto del aggiunto "div"Elemento:

Abbiamo fornito tutte le informazioni necessarie sulla stampa del contenuto di "div"Elemento usando JavaScript.

Conclusione

Per stampare il contenuto di un "div"Elemento, in primo luogo, devi assegnare un"id"In HTML, quindi memorizzare i suoi dati in una variabile accedendo al" ID "specificato nel codice JavaScript. Durante la programmazione in JavaScript, arrivano situazioni in cui è necessario stampare un particolare segmento di una pagina web. In tali casi, il nostro metodo fornito può aiutarti. Questo blog ha discusso della procedura di stampare il contenuto dell'elemento Div con l'aiuto di JavaScript.