用javascript强制下载

时间:2012-08-29 09:20:59

标签: php javascript mootools

我有一个像这样的php文件:

<?php

header("Content-type: application/octet-stream");
header("Content-Disposition: attachment; filename=\"my-data.csv\"");

$data = stripcslashes($_REQUEST['data']);
echo $data; 

?>

我可以将(正确格式化的)数据发布到它,它将返回一个csv文件。我这样做:

    var data = $('table').toCSV('tbody > tr');
    $('table').addEvent('click', function(){            
        new Request({
                url: 'getCSV.php',
                method: 'post'                  
        }).send('data=' + data);            
    }); 

在Firebug中我可以看到请求有效并且响应正常。但是不会弹出“下载”对话框;怎么解决这个问题?我是否需要PHP文件中的不同标题?

3 个答案:

答案 0 :(得分:1)

正如Gavin所说,ajax调用不能强制下载,响应只是保存到变量中。 您必须创建一个隐藏的表单和POST数据。像这样:

var data = $('table').toCSV('tbody > tr');

$('table').on('click', function(){            
    $('<form action="getCSV.php" target="_new" method="POST" style="display: none;">'+
        '<textarea name="data">'+data+'</textarea>'+
      '</form>')
    .appendTo('body')
    .submit();          
}); 

P.S我还没有测试过。

答案 1 :(得分:1)

我将JS更改为:

    var data = $('lijst').toCSV('tbody > tr');

    var form    = new Element('form', {method: 'post', action : 'getCSV.php'});
    var field   = new Element('input', {type: 'hidden', name: 'data', value: data});
    var submit  = new Element('input', {'type' : 'submit', 'value' : 'Download'});
    form.adopt(field,submit);

    form.inject($('lijst').getElement('caption'));

这会为表格添加一个不错的下载按钮,当浏览器跟随表单提交时,会弹出下载对话框。谢谢你和我一起思考。

答案 2 :(得分:0)

另一种方法是使用iframe。因此,当单击“下载”按钮时,您将在页面中注入iframe。你可以清理它之后。

document.body.inject(
 new Element('iframe', {
    'src': 'http://url.to.download', 
    'style': {
        'display': 'none'
     }
 })
);