リンクなしのJavaScript blobファイル名

Question

blobファイルを強制的にwindow.locationからダウンロードする際に、どのようにblobファイルの名前を設定しますか？上記のコードを実行する

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); 
} 

はbfefe410-8d9c-4883-86c5-d76c50a24a1dのように見えるページを更新せずに即座にファイルをダウンロードします。代わりにmy-download.jsonというファイル名を設定したいと思います。

Answer 1

私の知る唯一の方法は、FileSaver.jsが使用するトリックです：

1. 隠し<a>タグを作成します。
2. そのhref属性をblobのURLに設定します。
3. download属性をファイル名に設定します。
4. <a>タグをクリックします。ここで

簡略化した例（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); 

私はだけではなく、生産コード使用FileSaver.jsで、アイデアを説明するために、この例を書きました。それはHTML5の一部だから

注意

• 古いブラウザでは、 "ダウンロード" 属性をサポートしていません。
• 一部のファイル形式はブラウザによって安全でないとみなされ、ダウンロードは失敗します。拡張子がtxtのJSONファイルを保存すると私にとって効果的です。

Answer 2

 
$http.get(FILE_URL { 
          responseType: 'arraybuffer' 
          }).then(function(response) { 
          var file = new Blob([response.data], {type: fType}); 
          a.href = window.URL.createObjectURL(file); 
          a.download = fname; 
          a.click(); 
          }); 

Answer 3

は、私は（とにかくほとんどの現代版、）Internet Explorerのサポートと受け入れ答えに拡大したかった、とも同様にjQueryを使用してコードを片付け：

$(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 = $("<a style='display: none;'/>"); 
    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(); 
} 

Here is an example Fiddle 。 Godspeed。

Answer 4

上記の解決策と同じ原理です。しかし、大きなファイル（> 40 MB）がランダムな位置で切り捨てられるFirefox 52.0（32ビット）の問題がありました。 revokeObjectUrl（）の呼び出しを再スケジューリングすると、この問題が修正されます。

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) 
    } 
}