Em alguns casos necessitamos permitir ao nossos usuário que façam o download de dados gerados ou adquiridos via Javascript. É uma tarefa relativamente simples. Vamos ao código.

Primeiramente devemos criar um Blob que será o conteúdo que será baixado. Um Blob representa um dado do tipo arquivo como dados brutos imutáveis. Para criar um objeto Blob utilizamos o construtor Blob(blobParts[],options), vamos a um exemplo. 

let blobParts = ['{"nome":"Rodrigo","sobrenome":"Aramburu"}'];
let myBlob= new Blob(blobParts, {type : 'json/application'}); // o blob

Como vimos primeiro(linha 1) criamos o conteúdo do blob, que basicamente é um array de partes, após passamos este conteúdo para o construtor do blob como primeiro parâmetro e para o segundo passamos um objeto de opções informado que o mime-type do conteúdo é json.

Caso precise ler um Blob, você pode utilizar a classe FileReader que permite ler assincronamente arquivos utilizando blobs.

let reader = new FileReader();
reader.onload = function(event){
	console.log(reader.result);
};
reader.readAsText(meuBlob);

Basicamente o FileReader possui diversos métodos de leitura de blob para vários tipos de informação, utilizamos readAsText para ler o conteúdo do blob como texto mesmo. Uma vez feita a leitura o resultado será atribuído para o reader.result. Lembrando que a leitura é feita de forma assíncrona, então devemos configurar um manipulador de evento(onload) para realizar o que queremos com o resultado quando a leitura for finalizada.

Bom com o conteúdo que queremos realizar o download dentro de um blob podemos realizar o download propriamente dito. Para isso precisamos criar dinamicamente um elemento “a” atribuir o conteúdo para ele e realizar o clique para disparar o download. Vamos ao exemplo: 

let data = 'Um conteúdo qualquer';
let blob = new Blob([data], { type: 'text/plain;charset=utf-8;' });
const link= window.document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'export.txt';
link.click();
window.URL.revokeObjectURL(link.href);

Começamos criando um elemento “a” na linha 3, logo após utilizamos o método URL.createObjectURL para criar um objeto URL através do blob de conteúdo que queremos realizar o download. Esse objeto URL atribuímos para o atributo href do link(elemento “a”) que criamos. Passamos para o atributo download do nosso link o nome do arquivo que será salvo na linha 5 e finalmente chamamos o método click() que irá disparar o download. Após isso utilizamos o método URL.revokeObjectURL() para liberar os recursos do objeto URL criado com o conteúdo do blob criado com o createObjectURL.

Podemos adquirir um blob para realizar o download de diversas maneiras, por exemplo a resposta retornada pela função fetch fornece um método blob() para gerar um blob de seu retorno. 

 fetch('imagem.svg').then( async (result) =>{
     const blob = await result.blob();// recuperandoo um blob para baixar
     const anchor = window.document.createElement('a');

     anchor.href = window.URL.createObjectURL(blob);
     anchor.download = 'imagem.svg';
     anchor.click();
     window.URL.revokeObjectURL(anchor.href);
 });

Também podemos gerar um blob do conteúdo de um elemento canvas através da função toBlob dele.

let canvas = document.querySelector('#canvas');
let context = canvas.getContext('2d');

canvas.toBlob(
    blob => {
        const anchor = window.document.createElement('a');
        anchor.href = window.URL.createObjectURL(blob);
        anchor.download = 'export.jpg';
        anchor.click();
        window.URL.revokeObjectURL(anchor.href);

    },
    'image/jpeg',
    0.9,
);

A função toBlob recebe três argumentos o primeiro é uma função de callback que será chamada com o objeto blob criado, o segundo é mime-type e o terceiro a qualidade da imagem.

Veja os exemplos de download via javascript apresentados.

Bom era isso T++;