提示用户通过AJAX调用保存文件
Prompt user to save file through AJAX call
我正在将我的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.csv"。问题是它没有提示用户保存文件。这是我的PHP头有问题吗?还是我需要在$.post中放一些东西来提示成功?谢谢你的帮助!
您不能提示用户从AJAX调用下载文件。你可以做的一件事是,制作一个iFrame,在其中放入一个表单,然后POST它。这样,它看起来像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();
附言:你的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!");
}
});
相关文章:
- 如何使用javascript调用Php文件
- 从HTML调用typescript文件中的函数
- 是否可以从html中的javascript调用.vbs文件
- 使用metro-uiJS对话框调用其他文件html
- 使用JavaScript调用Excel文件
- 在Firefox中自动保存文件
- 通过Javascript调用php文件
- 阿贾克斯赢得了't调用PHP文件
- 提示用户通过AJAX调用保存文件
- 如何提供保存文件而不是从internet explorer打印文件的选项
- Basecamp的Trix WYSIWYG编辑器gem没有在Rails 4应用程序中保存文件附件
- 通过 AJAX 调用 PHP 文件,将 $_GET 变量传递到 MySQL 查询中,然后回显到响应中
- 钛:从Android的相机/图库图像本地保存文件
- 如何使用office.js检查未保存文件的具体文件扩展名
- AJax没有正确调用php文件,html表单
- node-webkit:将数据导出到csv并提示用户保存文件
- 通过本地应用程序的Javascript保存文件
- 通过Ajax调用PHP文件中的MySQL连接singleton对象
- 如何为使用 JSP 生成的下载文件显示“保存文件”对话框
- 如何调用保存在单独文件中的javascript ?