JavaScriptのAjaxでバイナリデータをダウンロード

download-page.php

<?php

// POSTされたパラメータを取得
$params = json_decode(file_get_contents("php://input"),true);

// 2次元配列のデータを取得
$data=getData($params);

// CSVデータ作成
// エクセルで表示できるようにエンコーディングをSJISに
// 改行コードをCRLFに
$contents=mb_convert_encoding("CSVデータ","SJIS-win");
$contents.="\r\n";

for ($i = 0; $i < count($data); $i++) {
  for($j =0; $j < count($data[$i]); $j++) {
    if ($j != 0) {
      $contents.=",";
    }
  }
  $contents.=mb_convert_encoding(str_replace(",","",$data[$i]),"SJIS-win");
}
$contents.="\r\n";


// content-type
header('Content-Type: application/octet-stream');

// ブラウザのMIMEタイプを判断を阻止
header('X-Content-Type-Options: nosniff');

// ファイルのサイズ
header('Content-Length: ' . strlen($contents));

// ファイル名はajax経由の場合jsで名付けます
header('Content-Disposition: attachment; filename="'.date('Y-m-d_H-i-s').'.csv"');

// keep aliveを無効に
header('Connection: close');

// 出力
echo  $contents;

exit(0);

sample.html

<script>
// AJAXするアドレス
let strAjaxUrl='./download-page.php';
// POSTパラメタ
let params={ key: value };

fetch(strAjaxUrl,{
  method: 'post',
  headers:{
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(params)
}).then(res=>{
  return res.arrayBuffer();
}).then(ab=>{
  let blob = new Blob([ab],{type: 'application/octet-stream'});
  let a = document.createElement('a');
  a.download="ファイル名.csv";
  a.href=window.URL.createObjectURL(blob);
  a.click();
  //ダウンロード後の片付け
  blob=null;
  a.remove();
}).catch((err) => {
  alert(err);
  console.error(err);
}).finally(() => {
  //成功、失敗問わない最終処理
});
</script>
...

sample.html

<script>
// AJAXするアドレス
let strAjaxUrl='./download-page.php';
// POSTパラメタ
let params={ key: value };

fetch(strAjaxUrl,{
  method: 'post',
  headers:{
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(params)
}).then(res=>{
  return res.blob();
}).then(blob=>{
  let a = document.createElement('a');
  a.download="ファイル名.csv";
  a.href=window.URL.createObjectURL(blob);
  a.click();
  //ダウンロード後の片付け
  blob=null;
  a.remove();
}).catch((err) => {
  alert(err);
  console.error(err);
}).finally(() => {
  //成功、失敗問わない最終処理
});
</script>
...

download-page.php

...
header("Content-Disposition: attachment; filename*=UTF-8''".rawurlencode($fileName));
...

sample.html

//レスポンスヘッダーからファイル名取得
function getFileName(response){
  let strFilename="";
  let find=null;
  let strDisposition = response.headers.get('Content-Disposition');

  if (strDisposition && strDisposition.indexOf('attachment') !== -1) {
    //拡張パターンの場合
    find = /filename\*=([^']*'')?([^;]*)/.exec(strDisposition);
    if(find!=null) {
      //find[1]にはUTF-8が入っている
      //URIデコード
      strFileName = decodeURIComponent(find[2]);
      //クオーテーションの除去
      return strFileName.replace(/['"]/g,'');
    }

    //非拡張パターンの場合
    find = /filename=([^;]*)/.exec(strDisposition);
    if(find != null) {
      strFileName = find[1];
      return strFileName.replace(/['"]/g,'');
    }
  }
  
  //名前が取得できなかった場合
  return "attachment_file";
}  

<script>
// AJAXするアドレス
let strAjaxUrl='./download-page.php';
// POSTパラメタ
let params={ key: value };
// ファイル名格納用
let strFileName ='';

fetch(strAjaxUrl,{
  method: 'post',
  headers:{
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(params)
}).then(res=>{
  
  strFileName = getFileName(res);
  
  return res.blob().then((blob)=>{
    let a = document.createElement('a');
    //取得したファイル名をここでセット
    a.download=strFileName;
    a.href=window.URL.createObjectURL(blob);
    a.click();
    //ダウンロード後の片付け
    blob=null;
    a.remove();
  });
}).catch((err) => {
  alert(err);
  console.error(err);
}).finally(() => {
  //成功、失敗問わない最終処理
});
</script>
...