PHP - ブートストラップモーダルダイアログ、日付を選択、CSVをダウンロード - ファイルを保存するブラウザを取得できません

Question

私はページを表示するためにブートストラップを使用しています。私は、日付範囲ピッカー、クローズ、ダウンロードボタンを含むモーダルダイアログを表示するダウンロードボタンを追加し、より広い範囲のデータをダウンロードできるようにしました。

モーダルコードの抜粋：さらに下

  <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h3 class="modal-title" id="DownloadModalLabel">Download Data </h3> 
     </div> 
     <div class="modal-body"> 
     <form id="download_form" action="api-dl.php" method="get"> 
      <div class="form-group"> 
      <label for="channel-name" class="control-label">Download Period:</label> 
      <input type="text" name="daterange" value="<?php echo $DownloadDateStart . " - " . $DownloadDateEnd; ?>" /> 
      </div> 
      <div class="form-group hidden"> 
      <input type="text" id="channel-id" name="channel-id" class="channel-id" value="ha" /> 
      <input type="text" name="site-id" class="site-id" value="<?php echo $SITE; ?>" /> 
      </div> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" id="submitForm" class="btn btn-primary" data-dismiss="modal">Download CSV</button> 
     </div> 

私はスクリプトがsubmitボタンに応答があります。

$(document).ready(function() { 
     $("#download_form").on("submit", function(e) { 
     var postData = $(this).serializeArray(); 
     var formURL = $(this).attr("action"); 
     $.ajax({ 
      url: formURL, 
      type: "GET", 
      data: postData, 
     }); 
     e.preventDefault(); 
     }); 
     $("#submitForm").on('click', function() { 
     $("#download_form").submit(); 
     }); 
    }); 

あなたは、私はPHPファイルを呼び出すことに注意しましょう

「API- dl.php "を押してデータを抽出し、CSVファイルで応答します。私はフラッシュの多くを試してみましたが、出力ストリームなどをPHPに出力しました。この時点で

header('Content-Disposition: attachment; filename="12345678.csv";'); 
header('Content-Type: "text/csv"'); 
header("Content-Length: 32"); 
header("Cache-Control: no-cache, no-store, must-revalidate"); 
header("Pragma: no-cache"); 
header("Expires: 0"); 
// 
echo '"15/10/2016", "12:00", "1.234\n"'; 

：ファイルがどのようなことをバック最低限偽の1行応答にカットします。常に私は私のブラウザ上で検査ペインに取得：

リクエストヘッダ：

Accept:*/* 
Accept-Encoding:gzip, deflate, sdch 
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6 
Connection:keep-alive 
Cookie:PHPSESSID=..... 
Host:r .... .net.au 
Referer:http://r .... .net.au/site.php?region=Test&site=Test 
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.90 Safari/537.36 Vivaldi/1.4.589.11 
X-Requested-With:XMLHttpRequest 

レスポンスヘッダ：

Cache-Control:no-cache, no-store, must-revalidate 
Connection:Keep-Alive 
Content-Disposition:attachment; filename="12345678.csv"; 
Content-Length:32 
Content-Type:"text/csv" 
Date:Sat, 24 Sep 2016 00:53:13 GMT 
Expires:0 
Keep-Alive:timeout=5, max=100 
Pragma:no-cache 
Server:Apache/2.4.18 (Ubuntu) 

を私の心に私はこのテーマに1248件のバリエーションを試してみた右に見えるもの。 [応答]タブでは、私が期待している応答が表示されます。

"15/10/2016", "12:00", "-1.234" 

しかし、私の人生の間、ブラウザをダウンロードすることはできません。

私は素晴らしいと思われるいくつかのJavascriptを見ましたが、データはクライアント側で利用できません。サーバー上のデータベースにあります。

私は多くのことを考えています。あなたはそれが何であると思いますか？

Answer 1

これは問題なく動作します。強制的にダウンロードを行うと、現在のページをダウンロードリンクにリダイレクトできます。参考：Download CSV file using "AJAX"

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#download_form").on("submit", function(e) { 
     $('#wait-animation').show(); /* If required show animation */ 
     var postData = $(this).serializeArray(); 
     var site_id = $('.site-id').val(); 
     var channel_id = $('.channel-id').val();    
     var daterange = $('.daterange').val();  
     document.location.href = $(this).attr("action")+"?site_id"+site_id+"&daterange="+daterange; 
     /*e.preventDefault();*/ 
     $('#wait-animation').hide(); /* hide animation after download completes*/ 
    }); 
    $("#submitForm").on('click', function() { 
    $("#download_form").submit(); 
    }); 
}); 
</script> 

Answer 2

XHRはダウンロードを処理できません。ブラウザはそのようなソリューションでは動作しません。 api-dl.phpファイルで回答を変更して、ダウンロードするリンクのみを返してください。次に、あなたのajaxは次のようになります：

$.ajax({ 
    url: formURL, 
    type: "GET", 
    data: postData, 
    success: function(response){ 
     window.open(response); 
    } 
}); 

ブラウザでファイルがどのようにダウンロードされるかが分かります。

Answer 3

私はほとんど同じことを行うが、ダウンロードをトリガーするPHPファイルにあなたのヘッダー文字列の末尾のReadFileを追加してみてください。例：

<?php 
$file = "http://path_to_some_file.csv; 
header('Content-Type: text/csv; charset=utf-8'); 
header("Content-Transfer-Encoding: Binary"); 
header("Content-disposition: attachment; filename="any_name_of_file.csv"); 
readfile($file); 
?>