LoginSignup
10
8

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-07-15

解説

流れとしては、カンマ区切りにした配列を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));

10
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
8