データ URI を使用してカスタム ファイル名を持つファイルをダウンロードするにはどうすればよいですか?

データ URI を使用したカスタム ファイル名のファイルのダウンロード

データ URI は、Web ページ内にデータを埋め込む便利な方法を提供します。ただし、データ URI からデータをダウンロードする場合、ブラウザは通常、ユーザーにファイル名の入力を求めます。マークアップで推奨されるファイル名を指定するか、JavaScript ソリューションを実装することは可能ですか?

ダウンロード属性

最新のブラウザは、アンカー () 要素。この属性を使用すると、ダウンロードしたファイルの推奨ファイル名を指定できます。

<a download="FileName" href="data:application/octet-stream;base64,SGVsbG8=">
  Download
</a>

このソリューションは、Chrome、Firefox、Edge、Opera、デスクトップ Safari 10 、iOS Safari 13 では動作しますが、IE11 では動作しません。

JavaScript ソリューション

「download」属性がサポートされていない場合は、 JavaScript ソリューションを使用できます。

const link = document.createElement("a");
link.setAttribute("href", "data:application/octet-stream;base64,SGVsbG8=");
link.setAttribute("download", "FileName");
link.click();

このコードはアンカー要素を作成し、「href」属性と「download」属性を設定して、クリック イベントをシミュレートしてダウンロードをトリガーします。

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