JavaScript で BLOB ダウンロードのカスタムファイル名を設定するにはどうすればよいですか?-jsチュートリアル-php.cn

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

DDD

リリース： 2024-12-05 13:45:11

オリジナル

912 人が閲覧しました

How to Set a Custom File Name for Blob Downloads in JavaScript?

JavaScript でのカスタム BLOB ファイル名の設定

JavaScript で BLOB を操作する場合、カスタム BLOB ファイル名の指定が必要になる場合があります。デフォルトのランダムに生成されたファイル名ではなく、ファイル名が使用されます。これは、ダウンロードまたはデータエクスポートに意味のあるファイル名を指定する場合に特に便利です。

問題: カスタム BLOB ファイル名の割り当て

次のコードスニペットは、 blob を作成し、window.location を通じてダウンロードしようとしますが、ダウンロードされたファイルには次のようなランダムな名前が付けられます。 "bfefe410-8d9c-4883-86c5-d76c50a24a1d":

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

ログイン後にコピー

解決策: A タグトリックを使用する

カスタムファイル名を割り当てる唯一の既知の方法JavaScript で BLOB にアクセスするには、非表示のメソッドを使用するトリックが必要です。タグ:

非表示のを作成します。

その href 属性を BLOB の URL に設定します。

その download 属性を目的のファイル名に設定します。

をクリックします。

コード例:

次の例は、このトリックを使用して JSON オブジェクトを次の名前のファイルに保存する方法を示しています。 "my-download.json":

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

ログイン後にコピー

注: