1. Utilizando a Tag HTML <a>

Uma das formas mais simples de realizar o download de arquivos é empregar a tag <a> com o atributo download. Contudo, este método somente funciona para recursos do mesmo domínio (same-origin). Para arquivos cross-origin, como imagens ou vídeos, ele redireciona em vez de baixar.

Exemplo de código:

<a href="https://exemplo.com/dados.txt" download="meu_arquivo.txt">Baixar</a>

Também é possível acionar o download via JavaScript:

const linkDownload = document.createElement('a');
linkDownload.href = 'https://exemplo.com/dados.txt';
linkDownload.download = 'meu_arquivo.txt';
linkDownload.click();

O atributo download, introduzido no HTML5, define o nome do arquivo salvo. Caso não seja especificado, o navegador utiliza o cabeçalho Content-Disposition ou, na sua ausência, a parte final da URL.

2. Empregando window.open

A função window.open pode ser utilizada para abrir uma URL em uma nova aba, o que também pode simular um download. Porém, posssui limitações semelhantes ao método anterior, incluindo a impossibilidade de baixar certos tipos de arquivo como HTML ou XML, que são renderizados no navegador.

Código ilustrativo:

window.open('https://exemplo.com/arquivo.pdf', '_blank');

É possível passar parâmetros adicionais para definir o nome do arquivo, mas a funcionalidade depende do comportamento do navegador.

3. Usando Propriedades de locasion

Propriedades como location.href, location.assign e location.replace podem redirecionar para um URL, o que pode resultar em download se o servidor responder com os cabeçalhos apropriados. No entanto, elas compartilham as mesmas desvantagens de window.open e são menos recomendadas para downloads diretos.

Exemplo:

location.href = 'https://exemplo.com/documento.pdf';

4. Implementando com XMLHttpRequest

Para contoranr as restrições de cross-origin e ter mais controle, pode-se utilizar XMLHttpRequest (ou APIs modernas como fetch) para baixar os dados e criar um objeto Blob. Em seguida, uma URL temporária é gerada via URL.createObjectURL para acionar o download.

Exemplo usando fetch:

async function baixarArquivo() {
  try {
    const resposta = await fetch('https://exemplo.com/dados.bin');
    const conteudo = await resposta.blob();
    const tipoArquivo = resposta.headers.get('content-type');
    const blob = new Blob([conteudo], { type: tipoArquivo });
    const urlTemporaria = URL.createObjectURL(blob);
    
    const ancora = document.createElement('a');
    ancora.href = urlTemporaria;
    ancora.download = 'arquivo.bin';
    ancora.click();
    
    URL.revokeObjectURL(urlTemporaria);
  } catch (erro) {
    console.error('Falha no download:', erro);
  }
}

O Blob representa dados binários imutáveis. É crucial definir corretamente o tipo MIME para que o arquivo seja reconhecido adequadamente. A URL criada com URL.createObjectURL permanece válida apenas durante o ciclo de vida do documento; portanto, deve-se chamar URL.revokeObjectURL após o uso para liberar memória.

Detalhes sobre Blob e URL.createObjectURL

Blob: É um objeto que encapsula dados brutos. Sua construção aceita um array de dados e um objeto de configuração com propriedades como type (tipo MIME) e endings (tratamento de quebras de linha).

URL.createObjectURL: Gera uma URL única que referencia o Blob em memória. Essa URL pode ser usada em elementos como <a> ou <img>. Para evitar vazamentos de memória, é essencial revogar a URL com URL.revokeObjectURL assim que não for mais necessária.

Em cenários onde o tipo de arquivo é desconhecido, pode-se inferi-lo a partir do cabeçalho content-type da resposta ou, para conteúdo genérico, utilizar bibliotecas como file-type para análise.