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

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 にアクセスするには、非表示のメソッドを使用するトリックが必要です。 タグ:

1. 非表示の を作成します。
2. その href 属性を BLOB の URL に設定します。
3. その download 属性を目的のファイル名に設定します。
4. をクリックします。

コード例:

次の例は、このトリックを使用して 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);

注:

• 古いブラウザではダウンロード属性がサポートされていない可能性があります。
• ファイル形式がブラウザでサポートされていない可能性があり、ダウンロードが失敗する可能性があります。たとえば、.txt 拡張子を付けて JSON ファイルを保存すると、機能することが確認されています。

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