Запросить пользователя для сохранения файла через вызов AJAX

Я экспортирую свою сетку DHTMLX в csv и успешно смог создать файл .CSV. Проблема, с которой я сталкиваюсь, заключается в том, что она не запрашивает пользователя для сохранения / открытия файла. Я использую вызов $ .post из javascript, чтобы отправить CSV-строку в PHP, а затем записать эту строку в csv. По какой-то причине он не создает приглашение для пользователя, но он успешно записывает файл и сохраняет его на сервере. Ниже приведен соответствующий код:

JS:

myGrid.csvParser = myGrid.csvExtParser; myGrid.setCSVDelimiter('|'); myGrid.csv.row = "endOfRow"; var gridCsvData = myGrid.serializeToCSV(); $.post( "data/export.php", { csvdata: gridCsvData } ); 

PHP (export.php):

 $csvData = $_REQUEST['csvdata']; $csv = explode('endOfRow',$csvData); $myfile = "grid.csv"; $fh = fopen($myfile, 'w') or die("can't open file"); foreach($csv as $line) { fputcsv($fh, explode('|',$line),',','"'); } fclose($fh); //Redirect output to a client's web browser (csv) header("Content-type: application/csv"); header("Content-Disposition: attachment; filename=grid.csv"); header("Pragma: no-cache"); header("Expires: 0"); 

Этот код отлично работает в том смысле, что он экспортирует Grid именно так, как я хочу, и сохраняет его в «grid.csv». Проблема в том, что он не запрашивает пользователя для сохранения файла. Является ли это проблемой для моих заголовков PHP или мне нужно что-то помещать в $ .post, чтобы сообщить об успехе? Спасибо за любую помощь!

Вы не можете запросить пользователя загрузить файл из вызова AJAX. Одна вещь, которую вы можете сделать, это сделать iFrame, вставить в нее форму, затем ПОСТ. Таким образом, это будет выглядеть как вызов AJAX, но пользователю будет предложено загрузить файл.

 // Create iFrame var iframe = document.createElement('iframe'); iframe.style.display = "none"; document.body.appendChild(iframe); // Get the iframe's document var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; // Make a form var form = document.createElement('form'); form.action = 'data/export.php'; // Your URL form.method = 'POST'; // Add form element, to post your value var input = document.createElement('input'); input.type = 'hidden'; input.name = 'csvdata'; input.value = gridCsvData; // Your POST data // Add input to form form.appendChild(input); // Add form to iFrame // IE doesn't have the "body" property (iframeDoc.body || iframeDoc).appendChild(form); // Post the form :-) form.submit(); 

PS Ваш PHP-код фактически не отображает CSV на экране, он просто сохраняет его в файл.

После вызовов заголовка убедитесь, что у вас есть:

 readfile($myfile); 

Правильный способ сделать это в HTML5 – использовать File API. См. Это для деталей: http://hackworthy.blogspot.com/2012/05/savedownload-data-generated-in.html .

Если HTML5 не является вариантом, используйте этот подход.

После того, как вы выполните POST, сгенерируйте запрос GET для файла, используя:

 document.location = "file.csv"; 

В зависимости от браузера файл будет сохранен (Chrome), или пользователю будет предложено выбрать имя файла для сохранения. Конечно, обработчик POST должен где-то сохранить файл.

 $.ajax({ type: "POST", url: "post.php", success: function() { console.log("Worked!"); document.location = "test.csv"; }, error: function() { console.log("Failed!"); } });