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

JavaScript で直接ダウンロードするための BLOB ファイル名のカスタマイズ

概要

window.location を使用する場合JavaScript で BLOB ファイルを強制的にダウンロードするには、ダウンロードされたファイルの名前が自動的に生成されます。このファイル名をカスタマイズするには、追加の手順が必要です。

FileSaver.js トリックによる解決策

回避策の 1 つは、FileSaver.js で採用されているものと同様のテクニックを利用することです。

1. 非表示の を作成します。タグ。
2. blob の URL を href 属性に割り当てます。
3. download 属性を使用して目的のファイル名を設定します。
4. をクリックしてダウンロードを開始します。 tag.

簡易例

function saveData(data, fileName) {
  var json = JSON.stringify(data),
      blob = new Blob([json], {type: "octet/stream"}),
      url = window.URL.createObjectURL(blob);
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  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 の使用法

上記の方法でも可能ですが、ファイルを保存するには、より堅牢な FileSaver.js ライブラリを使用することをお勧めします。 JavaScript:

import { saveAs } from 'file-saver';

var json = JSON.stringify(data),
    filename = "my-download.json";

var blob = new Blob([json], {type: "octet/stream"});
saveAs(blob, filename);

考慮事項

• ダウンロード属性は HTML5 の機能であるため、古いブラウザではサポートされていない可能性があります。
• 特定ファイル形式は安全でないとみなされ、ダウンロードがブロックされる可能性があります。 JSON ファイルを .txt 拡張子で保存すると、この問題を軽減できます。

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