PHP headers are not working in WordPress ajax call - php

Question

I have a PHP script that generate and download CSV file. Following is the code of that script:
<?php
$cars = array(
array("Volvo",22,1888),
array("BMW",15,13),
array("Saab",5,2),
array("Land Rover",17,15)
);
// output headers so that the file is downloaded rather than displayed
header('Content-Type: text/csv; charset=utf-8');
header('Content-Disposition: attachment; filename=csvfile.csv');
// create a file pointer connected to the output stream
$output = fopen('php://output', 'w');
// output the column headings
fputcsv($output, array('Car', 'Year', 'Miles' ));
//Loop through the array and add to the csv
foreach ($cars as $row) {
fputcsv($output, $row);
}
exit;
?>
This script work fine when I access it directly, But my aim is to use this script in a WordPress AJAX call, I have created the AJAX using WordPress AJAX API as following:
add_action( 'wp_ajax_export_timeline', 'export_timeline' );
And then same PHP code (that is pasted above) is written in callback function export_timeline, but instead of generating CSV and downloading against the AJAX call, printed array is returned in response. There is no error in AJAX in call, I have tested with echoing other string, its responding fine.
But in case of upper mentioned script, I think PHP headers are not working in callback function, because instead of generating and downloading CSV, its echoing the array in response. Any help is appriciated.

Answer 1

To my knowledge PHP headers do not work with AJAX calls:
what you can do is create csv data in your php code and echo that as a response to your callback.
Your php code must return a json as
echo json_encode(['data' => $data, 'status' => 'success' ]);
$data variable must have valid CSV formatted data.
In your javascript you can use the following for CSV download:
function download_csv(){
var make_download = (function () {
var $a = $('<a>', {
'class': 'csv-downloader',
'style': 'display: none'
});
$('body').find('.csv-downloader').remove();
$('body').append($a);
return function (data, fileName) {
const blob = new Blob([data], {type: "octet/stream"}),
url = window.URL.createObjectURL(blob);
$a[0].href = url;
$a[0].download = fileName;
$a[0].click();
window.URL.revokeObjectURL(url);
};
}());
$.when($.ajax({
dataType: 'json',
method: 'POST',
url: URL, // url here
})).then((response) => {
if (response.status == 'success') {
make_download(response.data, `my-file.csv`);
}
})
}

Answer 2

Try to directly call the url, without an ajax call, then it should work.

Answer 3

Try to modify headers as below
header("Pragma: public");
header("Expires: 0");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Cache-Control: private",false);
header("Content-Type: application/octet-stream");
header("Content-Disposition: attachment; filename=csvfile.csv" );
header("Content-Transfer-Encoding: binary");