Você já encontrou uma situação em que precisa imprimir o conteúdo de algum html específico e salvá -lo para uso futuro? Por exemplo, é necessário armazenar as receitas de culinária ou projetar idéias dos respectivos sites e usar essas informações enquanto trabalha offline. Em tais cenários, é importante para você saber como imprimir o conteúdo de qualquer elemento de HTML.

Neste blog, aprenderemos o procedimento para imprimir o conteúdo do elemento div com a ajuda do JavaScript.

Imprima o conteúdo de um elemento div usando JavaScript

Com a ajuda do exemplo abaixo do ritmo; Vamos demonstrar o procedimento para imprimir o conteúdo de um “div" elemento. Portanto, a seção a seguir compreende o código HTML e sua descrição.

Código HTML

• Em primeiro lugar, usaremos um elemento div e definiremos seu “eu ia" como "Divcon”O que ajudará a obter seu conteúdo em JavaScript.
• Na próxima etapa, vamos definir “luz amarela" Enquanto o "cor de fundo"Do adicionado"div" elemento.
• Dentro de "div”Elemento, agora adicionaremos um título e um parágrafo com“

  " e "

  ”Respectivos tags HTML.

Imprima o conteúdo de um elemento div usando JavaScript

Agora vamos imprimir o conteúdo de um elemento div usando JavaScript em uma nova janela. Pressione o botão abaixo e veja o resultado.

Em seguida, adicionaremos um botão que chama o “printDivContent ()”JavaScript Função em sua“ONCLICKEvento:

Imprimir

Código JavaScript
Para imprimir o conteúdo de um elemento HTML como “div”, Você precisa armazenar seus dados em uma variável. Agora, executaremos as etapas a seguir enquanto codificam o JavaScript:

• Primeiro, criaremos uma função chamada “printDivContent ()”.
• Em seguida, defina variáveis ​​chamadas “contentOfdiv" e "Newwin" dentro de "printDivContent ()”Função.
• Usando o “Divcon”ID, teremos o conteúdo do“div”Elemento HTML e armazená -lo na variável“contentOfdiv”.
• Variável "Newwin”Será usado para abrir a janela de impressão como um pop -up.
• Então vamos usar o “Newwin"Variável para chamar o método JavaScript"documento.escrever()”. Neste método, passaremos as tags dos elementos HTML que são adicionados dentro de "div", que em troca obtêm o conteúdo dos elementos especificados.

Aqui está o código completo para o exemplo anterior:

função printDivContent ()
var contentOfdiv = documento.getElementById ("divcon").innerhtml;
var newwin = janela.aberto (",", 'altura = 650, largura = 650');
Newwin.documento.escrever(");
Newwin.documento.Write ('Imprima conteúdo do elemento div usando JavaScript');
Newwin.documento.escrever('

Conteúdo do elemento div:
');
Newwin.documento.write (contentOfdiv);
Newwin.documento.escrever(");
Newwin.documento.fechar();
Newwin.imprimir();

Depois de correr acima do código HTML, a saída resultante no navegador será:

Clicando no “Imprimir”O botão chamará o JavaScript“printDivContent ()”Função e a seguinte janela aparecerão na tela:

Como você pode ver, acessamos com sucesso o conteúdo do adicionado “div" elemento:

Fornecemos todas as informações necessárias sobre a impressão do conteúdo de um “divElemento usando JavaScript.

Conclusão

Para imprimir o conteúdo de um “div”Elemento, primeiro, você precisa atribuir um“eu ia”No HTML, então armazene seus dados em uma variável acessando o“ ID ”especificado no código JavaScript. Ao programar em JavaScript, há situações em que é necessário imprimir um segmento específico de uma página da web. Nesses casos, nosso método fornecido pode ajudá -lo. Este blog discutiu o procedimento de imprimir o conteúdo do elemento div com a ajuda do JavaScript.