Ajax リクエストでファイルのダウンロードをトリガーするにはどうすればよいですか?

Ajax リクエストによるファイルのダウンロード

Ajax を使用してボタンをクリックするとファイルをダウンロードする機能を実装すると、問題が発生する可能性があります。これらの障害を克服するためのソリューションを検討してみましょう。

初期試行

これを達成するための最初の試行には、XMLHttpRequest を作成し、PHP スクリプトに GET リクエストを送信することが含まれます。示されている以下:

javascript:
var xhr = new XMLHttpRequest();
xhr.open("GET", "download.php");
xhr.send();

download.php:
<?
header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename= file.txt");
header("Content-Transfer-Encoding: binary");    
readfile("file.txt");
?>

制限事項

ただし、この方法はブラウザの制約により不十分です。 Ajax リクエストは、ダウンロード プロンプトを直接トリガーすることはできません。代わりに、ファイルに移動する必要があります。

解決策

次の 2 つのアプローチが利用可能です。

1. window.location とフォールバックの使用

window.location プロパティを利用してダウンロード スクリプトに移動し、ダウンロードをトリガーします。

$.ajax({
    url: 'download.php',
    type: 'POST',
    success: function() {
        window.location = 'download.php';
    }
});

2. HTML5 ダウンロード属性

最新のブラウザの場合、HTML5 ダウンロード属性を使用できます:

<a href="download.php" download>
  Download File
</a>

注:

- ダウンロード属性は、Chrome、Firefox、およびそれ以降のバージョンのインターネットでのみサポートされていますExplorer。

- ダウンロードするファイルがホスト ページと同じ発行元からのものであることを確認してください。

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