246

を介して強制的にダウンロードするときに、JavaScript で blob ファイルの名前をどのように設定します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);
}

上記のコードを実行すると、次のようなページの更新なしでファイルが即座にダウンロードされます。

bfefe410-8d9c-4883-86c5-d76c50a24a1d

代わりに、ファイル名をmy-download.jsonとして設定したいと思います。

4

9 に答える 9

63

私は、受け入れられた回答を 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();
}

Fiddle の例を次に示します。ゴッドスピード。

于 2016-04-27T20:08:51.057 に答える
40

上記のソリューションと同じ原則。しかし、Firefox 52.0 (32 ビット) では、大きなファイル (>40 MB) がランダムな位置で切り捨てられるという問題がありました。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)
  }
}

jsfiddle の例

于 2018-02-24T23:26:06.337 に答える