{"id":114757,"date":"2023-08-03T18:57:16","date_gmt":"2023-08-03T21:57:16","guid":{"rendered":"https:\/\/fluency.io\/br\/blog\/javascript-baixar-como-fazer-o-download-de-arquivos-com-javascript\/"},"modified":"2023-08-03T18:57:16","modified_gmt":"2023-08-03T21:57:16","slug":"javascript-baixar-como-fazer-o-download-de-arquivos-com-javascript","status":"publish","type":"post","link":"https:\/\/fluency.io\/br\/blog\/javascript-baixar-como-fazer-o-download-de-arquivos-com-javascript\/","title":{"rendered":"JavaScript Baixar: Como fazer o download de arquivos com JavaScript"},"content":{"rendered":"


\n
\n<\/p>\n

JavaScript Baixar: O que \u00e9 e como funciona<\/h1>\n

Introdu\u00e7\u00e3o<\/h2>\n

JavaScript \u00e9 uma linguagem de programa\u00e7\u00e3o amplamente utilizada para desenvolvimento web. Com JavaScript, \u00e9 poss\u00edvel adicionar interatividade, dinamismo e funcionalidades avan\u00e7adas aos sites. E uma das funcionalidades mais comuns \u00e9 a capacidade de baixar arquivos diretamente do navegador usando JavaScript.<\/p>\n

Funcionamento b\u00e1sico<\/h2>\n

O funcionamento b\u00e1sico da fun\u00e7\u00e3o de download de arquivos com JavaScript envolve a cria\u00e7\u00e3o de um link de download din\u00e2mico ou a manipula\u00e7\u00e3o do comportamento do navegador por meio do JavaScript para iniciar o download.<\/p>\n

M\u00e9todos para baixar arquivos com JavaScript<\/h2>\n

1. Download direto com o atributo “download”<\/h3>\n

O atributo “download” \u00e9 suportado em elementos de \u00e2ncora (““) e permite especificar que o arquivo deve ser baixado em vez de ser aberto pelo navegador. Para habilitar o download, basta adicionar o atributo “download” ao elemento e fornecer o URL do arquivo como valor do atributo “href”.<\/p>\n

<a href=\"https:\/\/www.example.com\/arquivo.pdf\" download>Download do arquivo<\/a><\/code><\/p>\n

2. Download program\u00e1tico com XMLHttpRequest<\/h3>\n

Outro m\u00e9todo para baixar arquivos com JavaScript \u00e9 usando a API XMLHttpRequest. Essa API permite fazer solicita\u00e7\u00f5es HTTP ass\u00edncronas para buscar o arquivo desejado e, em seguida, salvar o conte\u00fado do arquivo em um objeto Blob. A partir desse objeto Blob, o arquivo pode ser baixado localmente usando o objeto URL e um link de download din\u00e2mico.<\/p>\n


\n var xhr = new XMLHttpRequest();
\n xhr.open('GET', 'https:\/\/www.example.com\/arquivo.pdf', true);
\n xhr.responseType = 'blob';<\/p>\n

xhr.onload = function(e) {
\n if (this.status == 200) {
\n var blob = new Blob([xhr.response], {type: 'application\/pdf'});
\n var downloadUrl = URL.createObjectURL(blob);
\n var a = document.createElement(\"a\");
\n a.style.display = 'none';
\n a.href = downloadUrl;
\n a.download = 'arquivo.pdf';
\n document.body.appendChild(a);
\n a.click();
\n document.body.removeChild(a);
\n URL.revokeObjectURL(downloadUrl);
\n }
\n };<\/p>\n

xhr.send();
\n <\/code><\/p>\n

3. Download ass\u00edncrono com Fetch API<\/h3>\n

Quando se trata de fazer o download de arquivos grandes ou de v\u00e1rios arquivos ao mesmo tempo, \u00e9 recomendado realizar o download de forma ass\u00edncrona para evitar travamentos ou bloqueios do navegador durante o processo. Uma abordagem comum \u00e9 usar a API Fetch, que permite controlar a transfer\u00eancia de dados enquanto o download est\u00e1 em andamento.<\/p>\n


\n fetch('https:\/\/www.example.com\/arquivo.pdf')
\n .then(response => response.blob())
\n .then(blob => {
\n var downloadUrl = URL.createObjectURL(blob);
\n var a = document.createElement(\"a\");
\n a.style.display = 'none';
\n a.href = downloadUrl;
\n a.download = 'arquivo.pdf';
\n document.body.appendChild(a);
\n a.click();
\n document.body.removeChild(a);
\n URL.revokeObjectURL(downloadUrl);
\n });
\n <\/code><\/p>\n

Dicas para otimizar o download de arquivos usando JavaScript<\/h2>\n