Descarregar um ficheiro utilizando JavaScript
-
Use o atributo
downloadem HTML para baixar arquivos - Usando uma função de escrita personalizada para criar e baixar arquivos de texto em JavaScript
-
Use a Biblioteca
Axiospara baixar os arquivos
Neste artigo, aprenderemos como fazer download de arquivos usando JavaScript. O download automático de arquivos nos ajuda a recuperar arquivos diretamente da URL com uma função JavaScript, sem entrar em contato com nenhum servidor. Faremos isso usando nossas funções escritas personalizadas e usando o atributo de download do HTML 5.
Use o atributo download em HTML para baixar arquivos
O atributo download em HTML 5 é usado para baixar arquivos quando os usuários clicam no hiperlink. É usado com tags âncora - <a> e <area>. Devemos definir o atributo href especificando a origem do arquivo. O valor do atributo download determina o nome do arquivo baixado. Se este valor for removido, o nome do arquivo baixado será igual ao nome do arquivo original.
<!DOCTYPE html>
<html>
<head>
<title>How to Download files Using JavaScript </title>
</head>
<body>
<a href="apple.png" download="apple">
<button type="button">Download</button>
</a>
</body>
</html>
No código acima, baixamos uma imagem apple.png usando o atributo download. Primeiro criamos a tag âncora contendo o endereço da imagem e adicionamos o atributo download a ela. Em seguida, também criamos um botão de download para facilitar o download de arquivos.
Usando uma função de escrita personalizada para criar e baixar arquivos de texto em JavaScript
Essa abordagem criará dados de texto instantaneamente e, em seguida, usará JavaScript para criar um arquivo de texto e, em seguida, baixá-lo
Baixar algoritmo
-
Crie uma área de texto para inserir os dados de texto.
-
Crie uma tag âncora
<a>usando a propriedadecreateElemente atribua os atributosdownloadehrefa ela. -
Use o
encodeURIComponentpara codificar o texto e anexá-lo ao URI como seu componente. Isso nos ajudará a substituir certos caracteres especiais por uma combinação de sequências de escape. -
Defina o tipo de data para
text/plaine a codificação paraUTF-8usandodata:text/plain; charset = utf-8como o valor do atributo dehref. -
Anexa este elemento criado ao corpo do documento (página HTML).
-
Use
element.click()para simular um clique do mouse. -
Remova o elemento do corpo do documento (página HTML).
Anexe um ouvinte de eventos procurando por um clique em um botão de download. Chame a função de download com texto da área de texto e o nome do arquivo do arquivo de texto como parâmetros.
<!DOCTYPE html>
<html>
<head>
<title>
How to Download files Using JavaScript
</title>
</head>
<body>
<textarea id="text">DelftStack</textarea>
<br />
<input type="button" id="btn" value="Download" />
<script>
function download(filename, textInput) {
var element = document.createElement('a');
element.setAttribute('href','data:text/plain;charset=utf-8, ' + encodeURIComponent(textInput));
element.setAttribute('download', filename);
document.body.appendChild(element);
element.click();
//document.body.removeChild(element);
}
document.getElementById("btn")
.addEventListener("click", function () {
var text = document.getElementById("text").value;
var filename = "output.txt";
download(filename, text);
}, false);
</script>
</body>
</html>
Use a Biblioteca Axios para baixar os arquivos
Nesta abordagem, usaremos a biblioteca Axios para baixar arquivos. Antes de prosseguir com os detalhes da abordagem, vamos entender o que é Blob, o tipo de dado usado para baixar arquivos usando Axios.
Blob
Blob significa Binary Large Object e é um tipo de dados que pode armazenar dados binários. Ele representa dados como programas, fragmentos de código, objetos de multimídia e outras coisas que não oferecem suporte ao formato nativo de JavaScript.
Baixar arquivos
-
Crie uma solicitação Axios
getcom URL como a fonte do arquivo e oresponseTypecomo umblob. -
Resolva a promessa retornada pela solicitação Axios executando as seguintes etapas:
- Crie um DOMString que contém o URL que representa o objeto Blob.
- Crie uma tag âncora
<a>usando a propriedadecreateElemente atribua os atributosdownloadehrefa ela. - Defina
hrefcomo o URL criado na primeira etapa e o atributodownloadcomo o nome do arquivo baixado. - Anexe este link ao documento e simule um clique usando o método
.click(). - Remova este link do documento.
<!DOCTYPE html>
<html>
<head>
<title>How to download files using JavaScript</title>
</head>
<body>
<button onclick="download()">
Download Image
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js">
</script>
<script>
function download() {
axios({
url: 'https://source.unsplash.com/random/500x500',
method: 'GET',
responseType: 'blob'
})
.then((response) => {
const url = window.URL
.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'image.jpg');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
}
</script>
</body>
</html>
Aqui, obtemos imagens aleatórias de um site, usamos Axios para solicitar essas imagens na forma de blobs e, em seguida, baixamos usando o atributo download da tag âncora. Este método não se restringe ao texto simples inserido pelo usuário como o método anterior. Podemos solicitar qualquer tipo de dados de uma API e, em seguida, usar essa abordagem para salvar os dados dentro de nosso computador.
Todos os principais navegadores suportam todos os métodos acima, exceto o método que usa a biblioteca Axios. O Internet Explorer ainda não oferece suporte às promessas ES6 nativas e o Axios depende muito delas.
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn