PHPとajaxでCSVダウンロードしたい

Question

PHPとJSを使って実装しているのですが、システムの仕組み上、ajaxを使ってCSVをダウンロードする機能を作る必要があり、うまくできず困っています。

$.post('/hoge/csv_download', 'test_id=' + testId, function(result) {
            if (成功の場合) {
　　　　　　　　　 // ここに何か処理が入る？？
                return;
            }
        }, 'json')
        ...
        ...

// 試しにヘッダーだけ設定
$csv_header = array('id', 'name');
...
...
header('Content-Type: application/octet-stream; charset=Shift_JIS');
header('Content-Disposition: attachment; filename=test.csv');

$fp = fopen('php://output', 'w');

$csv_header_data = array_values($csv_header);
mb_convert_variables('SJIS-win', 'UTF-8', $csv_header_data);

fputcsv($fp, $csv_header_data);
fclose($fp);

return true;

こんな感じをイメージしていたのですが、CSVも生成されず、返り値もエラーになってしまいます。。。
どなたかご教示お願いいたします。

Answer 1

CSVの出力が失敗しているならまずそこから

<?PHP
header('Content-Type: application/octet-stream;');
header('Content-Disposition: attachment; filename=test.csv');
header('Content-Transfer-Encoding:8bit');

$csv_header =['id', 'name'];
print implode(",",$csv_header);
exit;
?>

ヘッダ以外のデータをどうしたいのか読み取れないのであとは追加サンプル次第

download

ファイルをダウンロードさせるにはhtml5のaタグdownload属性を使います
その際はPHP側も素直にheaderにcsvを指定します

• download.php

<?PHP
header('Content-Type: text/csv;charset=Shift_JIS');
header('Content-Disposition: attachment; filename=test.csv');
header('Content-Transfer-Encoding:8bit');

$csv_header =['id', 'name'];
print implode(",",$csv_header);

• html

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  var url="download.php";
  var a=document.createElement('a');
  a.setAttribute('href',url);
  a.setAttribute('download','test.csv');
  a.setAttribute('style','display:block;position:absolute;top:-999px;');
  document.querySelector('body').appendChild(a);
  a.click();
  a.parentNode.removeChild(a);
});
</script>

※IEを除く

Comments

[Discord]

ありがとうございます。ちなみにajax側では何か処理を記載する必要ないのでしょうか。

[Discord]

それと記載いただいたやり方でもajax側でエラーとなりました。

header('Content-Type: application/octet-stream;');
header('Content-Disposition: attachment; filename=test.csv');
header('Content-Transfer-Encoding:8bit');

return true;

こう書くと、エラーはなくなりました。

[Discord]

print implode(",",$csv_header);
のあとに、
return true;
してもエラーなるようです。

[yambejp]

UTF8のBOMが付加されていませんか？
そもそもsjisなんですよね？sjis指定で保存してください。
あとは追記分で確認ください

[yambejp]

上記ajaxは使っていません。
実はajaxでやる方法はありますが、くどい割に結局最後はアンカーでダウンロードさせるので
直接phpを指定するのが賢明です

[Discord]

ありがとうございます。こちら、fputcsvを使ったやり方ではできないのでしょうか。
php側で標準出力するやり方でないとできないのでしょうか。

[yambejp]

＞ php側で標準出力するやり方でないとできないのでしょうか。

phpでヘッダ吐いてなにかやろうとしているのですから
その後コンテンツを標準出力するのがまっとうな処理です

[Discord]

ありがとうございます。
記載いただいたサンプルでいけそうな感じなので、これで進めてみます。