☰

リンクのない JavaScript BLOB ファイル名 質問する

tag-icon • tag-icon javascript html download blob html5-filesystem
リンクのない JavaScript BLOB ファイル名 質問する

を介して強制的にダウンロードする場合、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に設定したいと思います。

ベストアンサー1

私が知っている唯一の方法は、ファイルセーバー.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 拡張子で保存するとうまくいきます。

おすすめ記事