难点:
- 后端:要用什么样的形式将准备好的data 传递给前端。
- 前端:如何触发浏览器直接下载,尤其是还要兼容IE
后端用的django:
# 前略
import json
df = pd.Dataframe(XXXX) # df是准备好的数据,是一个data frame。pd.Dataframe(XXXX) 是随便写的
response = HttpResponse(json.dumps({'status': 0, # 一个用来标志后台是否有error的状态位,跟download 功能没有关系
'download_data': df.to_csv(encoding='utf_8_sig'), # !!这里是重点
'download_filename': 'XXX' + datetime.datetime.now().strftime('%m%d%H%M%S') + '.csv'
}), content_type="application/json")
return response
前端:
$.ajax({
type: 'get',
url: url,
traditional:true,
dataType:'json',
async:false,
success:function(result){
// download raw data to user.
if (window.navigator.msSaveBlob) {
// IE - IE 不支持download 属性,所以比较麻烦。
var download_data = result['download_data'];
var blobData = 'uFEFF' // BOM head, make excel know it is csv.
blobData += download_data;
var blobObj = new Blob([blobData], {type: "application/octet-stream"}); // 创建blob对象的时候错了好几次,最后发现要再外面套个[]_(:з)∠)_
window.navigator.msSaveBlob(blobObj, result['download_filename'])
}
else{
//chrome or other - 页面会直接开始下载
var download_data = result['download_data'];
var blobData = 'uFEFF' // BOM head, make excel know it is csv.
blobData += download_data;
var export_uri = 'data:text/csv;charset=utf-8,'+encodeURIComponent(blobData);
var a_obj = document.createElement('a');
a_obj.setAttribute("href", export_uri);
a_obj.setAttribute("download", result['download_filename']);
a_obj.click();
// document.getElementById('download_link').href = export_uri; // 如果页面上有a标签,这样做就可以,然后让用户手动点击再下载
}
}
});


![[JS][兼容IE]通过ajax从后台获取数据并直接由JS下载 [JS][兼容IE]通过ajax从后台获取数据并直接由JS下载](http://www.mshxw.com/aiimages/31/276355.png)
