1. ホーム
  2. ジャバスクリプト

[解決済み】リンクのないJavaScriptのblobファイル名

2022-04-02 14:16:19

質問

で強制ダウンロードする場合、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 の代わりに

解決方法は?

私が知っている唯一の方法は、次のようなトリックです。 ファイルセーバー.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の一部であるため、古いブラウザでは"download"属性はサポートされていません。
  • ファイル形式によっては、ブラウザが安全でないと判断し、ダウンロードに失敗することがあります。JSONファイルを拡張子txtで保存するとうまくいきます。