Avez-vous déjà rencontré une situation où vous devez imprimer le contenu d'un HTML spécifique et l'enregistrer pour une utilisation future? Par exemple, il est nécessaire de stocker les recettes de cuisine ou de concevoir des idées à partir des sites Web respectifs et d'utiliser ces informations tout en travaillant hors ligne. Dans de tels scénarios, il est important que vous sachiez comment imprimer le contenu de tout élément de HTML.

Dans ce blog, nous apprendrons la procédure d'impression du contenu de l'élément div à l'aide de JavaScript.

Imprimez le contenu d'un élément div à l'aide de JavaScript

Avec l'aide de l'exemple donné ci-dessous; Nous démontrerons la procédure d'impression du contenu d'un «div" élément. Ainsi, la section suivante comprend le code HTML et sa description.

Code HTML

• Premièrement, nous utiliserons un élément div et définirons son «identifiant" comme "divcon«Ce qui aidera à obtenir son contenu en JavaScript.
• Dans la prochaine étape, nous allons définir "jaune clair«Comme le«Couleur de l'arrière plan"De l'ajout"div" élément.
• À l'intérieur de "div«Élément, nous allons maintenant ajouter une rubrique et un paragraphe avec«

  " et "

  »Tags HTML respectifs.

Imprimez le contenu d'un élément div à l'aide de JavaScript

Nous allons maintenant imprimer le contenu d'un élément div utilisant JavaScript dans une nouvelle fenêtre. Appuyez sur le bouton ci-dessous et voyez le résultat.

Ensuite, nous ajouterons un bouton qui appelle le «printdivContent ()«Fonction JavaScript sur son«Sur clic" événement:

Imprimer

Code javascript
Pour imprimer le contenu d'un élément HTML tel que «div», Vous devez stocker ses données dans une variable. Maintenant, nous allons effectuer les étapes suivantes lors du codage en javascript:

• Tout d'abord, nous créerons une fonction nommée «printdivContent ()".
• Ensuite, définissez des variables nommées «ContentofDiv" et "débutant" à l'intérieur de "printdivContent ()" fonction.
• En utilisant le «divcon«Id, nous obtiendrons le contenu du«div"Élément HTML et le stocker dans la variable"ContentofDiv".
• Variable "débutant”Sera utilisé pour ouvrir la fenêtre d'impression comme une fenêtre contextuelle.
• Ensuite, nous utiliserons le «débutant«Variable pour appeler la méthode JavaScript»document.écrire()". Dans cette méthode, nous passerons les balises des éléments HTML qui sont ajoutés à l'intérieur de «div», qui en retour obtiennent le contenu des éléments spécifiés.

Voici le code complet de l'exemple donné ci-dessus:

fonction printDivContent ()
var contentofdiv = document.getElementByid ("DivCon").innerhtml;
var newwin = fenêtre.ouvert (",", 'hauteur = 650, largeur = 650');
débutant.document.écrire(");
débutant.document.écrire ('Imprimer le contenu de l'élément div à l'aide de JavaScript');
débutant.document.écrire('

Contenu de l'élément div:
');
débutant.document.écrire (contenuofdiv);
débutant.document.écrire(");
débutant.document.fermer();
débutant.imprimer();

Après l'exécution au-dessus du code HTML, la sortie résultante sur le navigateur sera:

Cliquez sur le "Imprimer"Le bouton appellera le javascript"printdivContent ()”Fonction et la fenêtre suivante apparaîtra à l'écran:

Comme vous pouvez le voir, nous avons accédé à la réussite du contenu de l'ajout "div" élément:

Nous avons fourni toutes les informations nécessaires sur l'impression du contenu d'un «div»Élément utilisant JavaScript.

Conclusion

Pour imprimer le contenu d'un «div«Élément, tout d'abord, vous devez attribuer un«identifiant«Dans HTML, puis stockez ses données dans une variable en accédant à« l'ID »spécifié dans le code JavaScript. Lors de la programmation en JavaScript, il y a des situations où il est nécessaire d'imprimer un segment particulier d'une page Web. Dans de tels cas, notre méthode fournie peut vous aider. Ce blog a discuté de la procédure d'impression du contenu de l'élément div à l'aide de JavaScript.