JavaScript で BLOB ファイルをダウンロードするときにカスタム ファイル名を設定するにはどうすればよいですか?

JavaScript: 直接ダウンロードする BLOB ファイルのファイル名の設定

window.location を使用して JavaScript で BLOB ファイルをダウンロードする場合、ファイルは通常、一般的な名前で保存されます。カスタム ファイル名を設定するには、非表示の を作成するなどの特別なテクニックを使用する必要があります。 tag.

元のコード例:

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 に設定し、次の手順に従います。

非表示の を作成します。タグを付けてドキュメントに追加します。

var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";

を設定します。タグの href 属性を BLOB の URL に、download 属性を目的のファイル名に設定します。

a.href = url;
a.download = "my-download.json";

をクリックしてダウンロードをトリガーします。タグ:

a.click();

再度アクセスされないように BLOB の URL を取り消します:

window.URL.revokeObjectURL(url);

例実装:

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

注:

古いブラウザはダウンロード属性をサポートしていない可能性があります。
• 一部のファイル形式 (例: JSON) は、別の拡張子 (例: txt) を使用して、セキュリティ制限を回避します。
• より堅牢で信頼性の高いソリューションとして、FileSaver.js などのライブラリの使用を検討してください。

以上がJavaScript で BLOB ファイルをダウンロードするときにカスタム ファイル名を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。