Ajax はユーザー エクスペリエンスを向上させるためにファイル保存ダイアログを非同期的にトリガーするにはどうすればよいですか?

Ajax を使用した非同期ファイルのダウンロード: ファイル保存ダイアログのロックを解除する

このデジタル時代では、ファイルのダウンロードはいたるところで行われています。 Ajax の機能を使用すると、Web ページの操作を中断することなくファイルを非同期にダウンロードできるようになり、ユーザー エクスペリエンスを向上させることができます。

問題

サーバー側ファイルに Struts2 アクションを使用する場合ダウンロードし、jQuery 経由でアクションを呼び出すと、バイナリ ストリームでデータが取得されます。ただし、望ましい結果は、ユーザーがファイルをローカルに保存できるようにするファイル保存ダイアログをトリガーすることです。

最新のブラウザ ソリューション

最新のブラウザの場合、次のアプローチになります。推奨:

<br>fetch('your-download-endpoint').then(resp => resp.blob()).then(blob => {<br> const url = window.URL.createObjectURL(blob);<br> const a = document.createElement('a');<br> a.style.display = 'none';<br> a.href = url;<br> a.download = 'your-file-name'; // を指定します。希望のファイル名<br> document.body.appendChild(a);<br> a.click();<br> window.URL.revokeObjectURL(url);<br>});<br>

このコードは、BLOB データの一時 URL を作成し、アンカー要素に添付します。ドキュメント本文に追加されます。この非表示のアンカー要素をクリックすると、ファイル保存ダイアログがトリガーされ、ダウンロードが完了すると、一時 URL が取り消されます。

考慮事項

このアプローチは、次の場合にはうまく機能します。小規模から中規模のファイルの場合、非常に大きなダウンロードの場合はメモリ消費を考慮することが重要です。ファイルが大きくなることが予想される場合は、iframe や Cookie の使用などの代替手法が適している可能性があります。

以上がAjax はユーザー エクスペリエンスを向上させるためにファイル保存ダイアログを非同期的にトリガーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。