JS实现 File Download

problem:

Ajax is inable to receive a response in any form but text. Since it is now common for web applications to offer options for exporting your data in desktop app formats — such as .doc or .xls

 

方法一:

 http://www.filamentgroup.com/lab/jquery_plugin_for_requesting_ajax_like_file_downloads/

jQuery.download = function(url, data, method){

//url and data options required

if( url && data ){ 

//data can be string of parameters or array/object

data = typeof data == ‘string’ ? data : jQuery.param(data);

//split params into form inputs

var inputs = ‘’;

jQuery.each(data.split(‘&’), function(){ 

var pair = this.split(‘=’);

inputs+=’<input type="hidden" name="’+ pair[0] +’" value="’+ pair[1] +’" />’; 

});

//send request

jQuery(‘<form action="’+ url +’" method="’+ (method||’post’) +’">’+inputs+’</form>’)

.appendTo(‘body’).submit().remove();

};

};

 

$.download(‘/export.php’,’filename=mySpreadsheet&format=xls&content=’ + spreadsheetData );


 

方法二:

Ajax的处理都是异步的,所以想实现文件下载这种同步的操作,就比较捉襟见肘。

不过google了一下,找到了一个方法,当然不是完美

主旨就是提交一个request,在server端将文件生成好,然后返回文件名,

client端则在js中隐藏一个frame,将frame的src指向生成的文件(根据返回的文件名)

 

client:

Ext.Ajax.request({

url: ‘/csvoutput/‘,

success: function(r, o) {

obj = Ext.util.JSON.decode(r.responseText);

try {

Ext.destroy(Ext.get(‘downloadIframe’));

}

catch(e) {}

Ext.DomHelper.append(document.body, {

tag: ‘iframe’,

id:’downloadIframe’,

frameBorder: 0,

width: 0,

height: 0,

css: ‘display:none;visibility:hidden;height:0px;’,

src: obj.filename

});

},

failure: function(r, o){

},

headers: {

             ’my-header’: ‘csvoutput’

         },

params: { }

});

 

server:(django)

result = {}

result[‘filename’] = filename

result[‘success’] = True

return HttpResponse(simplejson.dumps(result), mimetype=’text/javascript’)