Como baixar um arquivo usando javascript

O JavaScript compreende um pacote de recursos, métodos e propriedades internos para atender às demandas do usuário e do desenvolvedor. Download de arquivos é uma tarefa útil em qualquer navegador para acionar um arquivo e baixá -lo. JavaScript permite baixar qualquer arquivo da Internet. Esta postagem demonstra vários exemplos de download de um arquivo usando JavaScript.

• Como baixar um arquivo em javascript
• Exemplo 1: Download de um arquivo da Internet
• Exemplo 2: Criando e baixando um arquivo de texto

Como baixar um arquivo em javascript?

JavaScript fornece um Href atributo para baixar um arquivo. O atributo é suportado pelo HTML 5. Usando este atributo, os usuários podem empregar o link assim como o botão Para baixar arquivos de acordo com suas necessidades. Dois exemplos são explicados em detalhes para baixar o texto, bem como arquivos de imagem em javascript.

Exemplo 1: baixando um arquivo da internet

Um exemplo é adaptado para baixar um Jpg Arquivo usando um hiperlink em javascript. O pedaço de código é dividido em dois arquivos nomeados Html e JavaScript.

Código HTML

<H2> Um exemplo para baixar o arquivo jpgH2>

Por favor clique no link abaixo

Link para Download

Neste pedaço de código,

• Em primeiro lugar, todo o script está escrito dentro Tags para alinhamento central.
• Depois disso, uma âncora A tag é utilizada para fornecer um link chamado “Link para Download.”
  Finalmente, um arquivo de imagem chamado “Remotar-Jobs.jpg ” é baixado pressionando o "Link para Download"

Código JavaScript

// Crie um link
const Download = (p, f) =>
const anchor = documento.createElement ('a');
âncora.href = p;
âncora.download = f;
documento.corpo.ApndendChild (âncora);
âncora.clique();
documento.corpo.removechild (âncora);
;

A descrição do código JavaScript está escrito abaixo:

• O download o atributo é utilizado passando por dois argumentos, p e
• Depois disso, um âncora o objeto é criado que está associado ao arquivo html, passando pelo "a"
• O argumento p especifica a localização do arquivo que está associado ao Href
• Além disso, o outro argumento f refere -se ao nome do arquivo baixado.
• Além disso, o AppendChild A propriedade é utilizada para acionar o âncora
• finalmente, o RemoveChild A propriedade é usada para remover o evento criado pelo clique().

Saída

A saída retorna uma mensagem com um “Link para Download". Depois de pressionar um link, um arquivo de imagem no formato JPG é baixado.

Exemplo 2: Criando e baixando um arquivo de texto

Outro exemplo é considerado para baixar um texto arquivo em javascript. Neste exemplo, um botão está anexado para baixar um texto arquivo. Aqui, o exemplo demonstra que o usuário pode inserir texto em uma caixa de texto e o texto será baixado em um arquivo de texto. O nome do arquivo baixado é “JavaScript.TXT". O código completo está escrito em um arquivo html.

Código HTML

Um exemplo para baixar o arquivo de texto

Por favor clique no link abaixo

Bem -vindo ao JavaScript

A descrição do código é discutida abaixo:

• Uma área de texto é especificada usando o Tags nas quais o usuário pode modificar dados para download.
• A “Botão de download” está anexado para baixar um arquivo.

JavaScript

documento.getElementById ("dwn-btn").addEventListener ("clique", function ()
var t = documento.getElementById ("val").valor;
var fn = "JavaScript.TXT";
dwn (fn, t);
, false);
função dwn (fn, t)
var elemento = documento.createElement ('a');
elemento.setAttribute ('href', 'dados: text/planing; charset = utf-8,' + codeuricomponent (t));
elemento.setattribute ('download', fn);
elemento.estilo.display = 'nenhum';
documento.corpo.appendChild (elemento);
elemento.clique();
documento.corpo.removechild (elemento);

O código é explicado como:

• Uma propriedade addEventListener é empregado para desencadear um função() passando pelo clique valor do botão.
• Um método dwn é usado para baixar um arquivo passando fn e t
• O setattribute é utilizado para definir o Href e download atributos.
• O AppendChild A propriedade é empregada para anexar elementos.
• Depois disso, o clique() O método é aplicado ao elemento.
• Por fim, o removechild () O método remove os elementos da criança.

Saída

A saída exibe uma área de texto na qual a mensagem “Bem -vindo ao JavaScript ” está escrito. Depois de pressionar o “Botão de download ”, o arquivo de texto nomeado “JavaScript.TXT" é baixado, contendo a mensagem nele.

Conclusão

O Href O atributo é usado para baixar um arquivo acionando um evento em javascript. Com base no Href atributo, dois exemplos são praticamente implementados para download imagem e texto arquivos. No primeiro exemplo, um Hiperlink está anexado para baixar um imagem arquivo, enquanto no segundo exemplo, um botão é empregado para baixar um texto arquivo. Neste guia, você aprendeu os atributos do JavaScript para baixar um arquivo.