Download/Baixar arquivo através de Javascript
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++;