提示用户通过AJAX调用保存文件

Question

我正在将我的DHTMLX网格导出到csv,并且已成功创建.CSV文件.我遇到的问题是它没有提示用户保存/打开文件.我正在使用来自javascript的$ .post调用将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中添加一些东西来提示成功？谢谢你的帮助!

Answer 1

您无法提示用户从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);