JavaScript でデータ URL をダウンロードする方法: Chrome と Firefox のソリューション?

JavaScript でのデータ URL のダウンロード

JavaScript ベースの zip/unzip ユーティリティを作成しようとすると、次の問題が発生しました。データ URL でエンコードされたファイルをダウンロードする。このアプローチは Firefox では機能しますが、Chrome では失敗します。

Chrome のジレンマ

Chrome はデータ URL の直接ダウンロードをサポートしていません。代わりに、img タグを使用して参照されると、それらを画像として埋め込みます。これは、画像以外のファイル形式で問題を引き起こします。

回避策

幸いなことに、Chrome と Firefox の両方でデータ URL のダウンロードを有効にする回避策が存在します。この解決策には、一時的な a 要素を作成し、その download 属性を目的のファイル名に設定し、データ URL をその href 属性に割り当てることが含まれます。

コード例

以下JavaScript 関数の downloadURI はこれを実装します。回避策:

function downloadURI(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}

使用法

この関数を使用するには、データ URL と必要なダウンロード ファイル名を引数として指定します:

downloadURI("data:text/html,HelloWorld!", "helloWorld.txt");

この方法では、Chrome と Firefox の両方でダウンロード ダイアログが表示され、ユーザーは指定したファイル名でファイルを保存できます。

以上がJavaScript でデータ URL をダウンロードする方法: Chrome と Firefox のソリューション?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。