【jQuery】配列をCSVファイルにして、ダウンロードする方法

解説

流れとしては、カンマ区切りにした配列をAjaxを利用して、CSVを生成するPHPファイルを呼び出します。
返ってきた値をブラウザでダウンロードすることになります。

送信するデータ（例）

Array 
( 
  [0] => ID,title,date 
  [1] => 1,test_01,2018-07-14
  [2] => 2,test_01,2018-07-15
  [3] => 3,test_01,2018-07-16
)

まずはjavascriptの実装です。

jQuery

<script>
  function csv_download(data){
    jQuery.ajax({
      url:"/request.php",//CSVファイルを出力するPHPファイル
      dataType: "json",
      contentType: "application/json",
      type:"POST",
      data: JSON.stringify(data),
      beforeSend: function(xhr){
        xhr.overrideMimeType("text/plain; charset=shift_jis");//文字化けしないようにMIMEタイプをオーバーライドする
      },
      success: function(data) {
        if(data!=""){
          var downloadData = new Blob([data], {type: "text/csv"});
          var filename ="download.csv";
          //ファイルのダウンロードにはブラウザ毎に処理を分けます
          if(window.navigator.msSaveBlob){ // for IE
            window.navigator.msSaveBlob(downloadData, filename);
          }else{
            var downloadUrl  = (window.URL || window.webkitURL).createObjectURL(downloadData);
            var link = document.createElement("a");
            link.href = downloadUrl;
            link.download = filename;
            link.click();
            (window.URL || window.webkitURL).revokeObjectURL(downloadUrl);
          }
        }
      },
      error: function(xhr, textStatus, errorThrown){
        alert("CSVファイルのダウンロードに失敗しました。")
      }
    })
  }
</script>

次にCSVファイルを出力するためのPHPの実装です。

request.php

$json = file_get_contents("php://input");
$data = json_decode($json);

$csv="";
foreach ($data as $value){
  $csv.=$value;
  $csv.="\n";
}

header("Content-Type: application/octet-stream");
header("Content-Disposition: attachment; filename=test.csv");

echo(json_encode($csv));