Nome de arquivo blob JavaScript sem link

Como você define o nome de um arquivo de blob em JavaScript quando forçar o download através de window.location?

function newFile(data) { var json = JSON.stringify(data); var blob = new Blob([json], {type: "octet/stream"}); var url = window.URL.createObjectURL(blob); window.location.assign(url); } 

A execução do código acima faz o download de um arquivo instantaneamente sem uma atualização de página semelhante a bfefe410-8d9c-4883-86c5-d76c50a24a1d. Eu quero definir o nome do arquivo como meu-download.json em vez disso.

A única maneira que conheço é o truque usado pelo FileSaver.js :

  1. Crie uma tag oculta.
  2. Defina seu atributo href para o URL do blob.
  3. Defina seu atributo de download para o nome do arquivo.
  4. Clique na tag .

Aqui está um exemplo simplificado ( jsfiddle ):

 var saveData = (function () { var a = document.createElement("a"); document.body.appendChild(a); a.style = "display: none"; return function (data, fileName) { var json = JSON.stringify(data), blob = new Blob([json], {type: "octet/stream"}), url = window.URL.createObjectURL(blob); a.href = url; a.download = fileName; a.click(); window.URL.revokeObjectURL(url); }; }()); var data = { x: 42, s: "hello, world", d: new Date() }, fileName = "my-download.json"; saveData(data, fileName); 

Eu escrevi este exemplo apenas para ilustrar a ideia, no código de produção use FileSaver.js.

Notas

  • Os navegadores mais antigos não são compatíveis com o atributo “download”, pois fazem parte do HTML5.
  • Alguns formatos de arquivo são considerados inseguros pelo navegador e o download falha. Salvando arquivos JSON com extensão txt funciona para mim.

Eu só queria expandir a resposta aceita com suporte para o Internet Explorer (a maioria das versões modernas, de qualquer forma), e também arrumar o código usando o jQuery também:

 $(document).ready(function() { saveFile("Example.txt", "data:attachment/text", "Hello, world."); }); function saveFile (name, type, data) { if (data != null && navigator.msSaveBlob) return navigator.msSaveBlob(new Blob([data], { type: type }), name); var a = $(""); var url = window.URL.createObjectURL(new Blob([data], {type: type})); a.attr("href", url); a.attr("download", name); $("body").append(a); a[0].click(); window.URL.revokeObjectURL(url); a.remove(); } 

Aqui está um exemplo do Fiddle . Godspeed

Mesmo princípio que as soluções acima. Mas eu tive problemas com o Firefox 52.0 (32 bits), onde arquivos grandes (> 40 MBytes) são truncados em posições aleatórias. Reagendar a chamada de revokeObjectUrl () corrige esse problema.

 function saveFile(blob, filename) { if (window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveOrOpenBlob(blob, filename); } else { const a = document.createElement('a'); document.body.appendChild(a); const url = window.URL.createObjectURL(blob); a.href = url; a.download = filename; a.click(); setTimeout(() => { window.URL.revokeObjectURL(url); document.body.removeChild(a); }, 0) } } 
 saveFileOnUserDevice = function(file){ // content: blob, name: string if(navigator.msSaveBlob){ // For ie and Edge return navigator.msSaveBlob(file.content, file.name); } else{ let link = document.createElement('a'); link.href = window.URL.createObjectURL(file.content); link.download = file.name; document.body.appendChild(link); link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window})); link.remove(); window.URL.revokeObjectURL(link.href); } } 
 $ http.get (FILE_URL {
                             responseType: 'arraybuffer'
                           então (function (response) {
                             var file = new Blob ([resposta.data], {tipo: fType});
                             a.href = window.URL.createObjectURL (arquivo);
                             a.download = fname;
                             a.click ();
                           });
Intereting Posts