¿Alguna vez ha encontrado una situación en la que necesita imprimir el contenido de algún HTML específico y guardarlo para uso futuro?? Por ejemplo, se requiere almacenar las recetas de cocina o diseñar ideas de los sitios web respectivos y usar esta información mientras trabaja sin conexión. En tales escenarios, es importante que sepa cómo imprimir el contenido de cualquier elemento de HTML.

En este blog, aprenderemos el procedimiento para imprimir el contenido del elemento Div con la ayuda de JavaScript.

Imprima el contenido de un elemento Div usando JavaScript

Con la ayuda del ejemplo dado a continuación; Demostraremos el procedimiento para imprimir el contenido de un "div" elemento. Entonces, la siguiente sección comprende el código HTML y su descripción.

Código HTML

• En primer lugar, usaremos un elemento div y estableceremos su "identificación" como "divcon"Lo que ayudará a obtener su contenido en JavaScript.
• En el siguiente paso, estableceremos "amarillo claro"Como el"color de fondo"Del agregado"div" elemento.
• Dentro de "div"Elemento, ahora agregaremos un encabezado y un párrafo con"

  " y "

  "Etiquetas HTML respectivas.

Imprima el contenido de un elemento Div usando JavaScript

Ahora imprimiremos el contenido de un elemento divirio usando JavaScript en una nueva ventana. Presione el botón ABAJO y vea el resultado.

Luego agregaremos un botón que llama al "printDivContent ()"JavaScript funciona en su"Al hacer clic" evento:

Imprimir

Código JavaScript
Para imprimir el contenido de un elemento HTML como "div", Necesita almacenar sus datos en una variable. Ahora, realizaremos los siguientes pasos mientras codificamos en JavaScript:

• Primero, crearemos una función llamada "printDivContent ()".
• Luego, defina variables llamadas "ContentOfDiv" y "Newwin" dentro de "printDivContent ()" función.
• Usando el "divcon"Id, obtendremos el contenido del"div"Elemento HTML y guárdelo en la variable"ContentOfDiv".
• Variable "Newwin"Se usará para abrir la ventana de impresión como ventana emergente.
• Entonces usaremos el "Newwin"Variable para llamar al método JavaScript"documento.escribir()". En este método, pasaremos las etiquetas de los elementos HTML que se agregan dentro de "div", que a cambio obtienen el contenido de los elementos especificados.

Aquí está el código completo para el ejemplo anterior:

función printDivContent ()
var contentofdiv = documento.GetElementById ("Divcon").innerhtml;
var newwin = ventana.abierto (",", 'altura = 650, ancho = 650');
Newwin.documento.escribir(");
Newwin.documento.escribir ('imprimir contenido del elemento div uso de javaScript');
Newwin.documento.escribir('

Contenido del elemento Div:
');
Newwin.documento.escribir (contentOfDiv);
Newwin.documento.escribir(");
Newwin.documento.cerca();
Newwin.imprimir();

Después de ejecutar el código HTML por encima, la salida resultante en el navegador será:

Haciendo clic en el "Imprimir"El botón llamará al JavaScript"printDivContent ()La función "y la siguiente ventana aparecerá en la pantalla:

Como puede ver, hemos accedido con éxito el contenido del agregado "div" elemento:

Hemos proporcionado toda la información necesaria sobre la impresión del contenido de un "div"Elemento usando JavaScript.

Conclusión

Para imprimir el contenido de un "div"Elemento, en primer lugar, debe asignar un"identificación"En HTML, luego almacene sus datos en una variable accediendo a la" ID "especificada en el código JavaScript. Mientras se programan en JavaScript, se producen situaciones en las que se requiere imprimir un segmento particular de una página web. En tales casos, nuestro método proporcionado puede ayudarlo. Este blog discutió el procedimiento de imprimir el contenido del elemento Div con la ayuda de JavaScript.