JavaScript で BLOB をダウンロードするときにファイル名を制御するにはどうすればよいですか?

JavaScript での BLOB ダウンロードのカスタム ファイル名

window.location 経由で BLOB ファイルを強制的にダウンロードする場合、割り当てられるファイル名はランダムな文字列になる可能性があります。このファイル名をカスタマイズするには、非表示要素を使用する回避策が採用されます。

実装

FileSaver.js では、次のようなアプローチが提供されます。

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

例

次の簡略化された例は、この手法を示しています。

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

Notes

• 古いブラウザではダウンロードがサポートされていない可能性があります属性.
• 特定のファイル形式は安全でないとみなされ、ダウンロードの失敗を引き起こす可能性があります。 JSON ファイルを .txt 拡張子で保存することをお勧めします。

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