[已解决]Ajax下载Excel 文件， 求高手指点。

makliu

Django ， 有个下载的要求， 需要通过ajax来实现 。



前端ajax代码如下：

1. function bindExport(){        
   
2.         $('#btnExport').click(function(){
   
3.            $.ajax({
   
4.                 url:"/eg/fileDownload/",
   
5.                 type:"post",
   
6.                 data:$("#form1").serialize(),
   
7.                 dataType: 'json',
   
8.                 success:function(res){
   
9.                         //  响应成功后， 不会写了。
   
10.                         ？？？
    
11.                 },
    
12.            })
    
13.         })
    
14.     };

复制代码

视图代码

1. def refundExport(request):
   
2.     if request.method=="POST":
   
3.         # 根据前端的查询条件， 查询数据库数据
   
4.         startTime = request.POST.get('startTime')
   
5.         endTime = request.POST.get('endTime')
   
6.         datas = models.objects.filter(startTime=startTime, endTime=endTime)
   
7.        
   
8.         # 视图能正常获取到      startTime  和   endTime  的值 。
   
9.         # 下载的代码， 不会写了。
   
10. 
    
11.         return ???

复制代码

最佳答案

月排行榜 / 总排行榜

sfqxx

2023-5-18 19:42:29

要实现通过Ajax来下载文件，可以考虑使用Blob和URL.createObjectURL()等新特性。以下是一个简单的Ajax文件下载示例：

前端ajax代码：

1. function bindExport() {
   
2.     $('#btnExport').click(function() {
   
3.         $.ajax({
   
4.             url: "/eg/fileDownload/",
   
5.             type: "post",
   
6.             data: $("#form1").serialize(),
   
7.             dataType: 'json',
   
8.             success: function(res) {
   
9.                 // 获取返回的二进制数据
   
10.                 var blob = new Blob([res], {type: 'application/octet-stream'});
    
11.                 // 创建URL对象并设置其href属性为blob对象的URL
    
12.                 var a = document.createElement('a');
    
13.                 a.href = URL.createObjectURL(blob);
    
14.                 a.download = 'filename.xls';  // 文件名
    
15.                 // 触发下载操作
    
16.                 a.click();   
    
17.             },
    
18.         })
    
19.     })
    
20. };

复制代码

在上述示例中，首先使用Ajax向后台发送请求并获取返回的二进制数据（假设返回的数据为Excel表格），然后将该数据封装成Blob对象，并创建URL对象并设置其href属性为Blob对象的URL。最后创建一个a标签，设置其download属性为文件名，触发该标签的点击事件即可完成文件下载操作。

后端视图代码：

1. from django.http import HttpResponse
   
2. 
   
3. def file_download(request):
   
4.     if request.method == 'POST':
   
5.         # 根据查询条件从数据库中查询数据，生成Excel表格并将其写入BytesIO对象中
   
6.         from io import BytesIO
   
7.         output = BytesIO()
   
8.         xlwt.Workbook().save(output)
   
9.         output.seek(0)
   
10.         # 设置响应头并将BytesIO对象中的数据返回给前端
    
11.         response = HttpResponse(output.getvalue(), content_type='application/octet-stream')
    
12.         response['Content-Disposition'] = 'attachment; filename="filename.xls"'
    
13.         return response

复制代码

在上述示例中，根据前端传来的查询条件，从数据库中查询到相应的数据并生成Excel表格。将表格写入BytesIO对象中后，设置响应头，并将BytesIO对象中的数据作为响应内容返回给前端。

注意：以上代码仅供参考，具体的实现方式和细节还需要根据实际情况进行修改和优化。另外，在实际使用中还需要考虑文件下载的安全性等方面的问题。

跳转到最佳答案楼层

sfqxx

要实现通过Ajax来下载文件，可以考虑使用Blob和URL.createObjectURL()等新特性。以下是一个简单的Ajax文件下载示例：

前端ajax代码：

1. function bindExport() {
   
2.     $('#btnExport').click(function() {
   
3.         $.ajax({
   
4.             url: "/eg/fileDownload/",
   
5.             type: "post",
   
6.             data: $("#form1").serialize(),
   
7.             dataType: 'json',
   
8.             success: function(res) {
   
9.                 // 获取返回的二进制数据
   
10.                 var blob = new Blob([res], {type: 'application/octet-stream'});
    
11.                 // 创建URL对象并设置其href属性为blob对象的URL
    
12.                 var a = document.createElement('a');
    
13.                 a.href = URL.createObjectURL(blob);
    
14.                 a.download = 'filename.xls';  // 文件名
    
15.                 // 触发下载操作
    
16.                 a.click();   
    
17.             },
    
18.         })
    
19.     })
    
20. };

复制代码

在上述示例中，首先使用Ajax向后台发送请求并获取返回的二进制数据（假设返回的数据为Excel表格），然后将该数据封装成Blob对象，并创建URL对象并设置其href属性为Blob对象的URL。最后创建一个a标签，设置其download属性为文件名，触发该标签的点击事件即可完成文件下载操作。

后端视图代码：

1. from django.http import HttpResponse
   
2. 
   
3. def file_download(request):
   
4.     if request.method == 'POST':
   
5.         # 根据查询条件从数据库中查询数据，生成Excel表格并将其写入BytesIO对象中
   
6.         from io import BytesIO
   
7.         output = BytesIO()
   
8.         xlwt.Workbook().save(output)
   
9.         output.seek(0)
   
10.         # 设置响应头并将BytesIO对象中的数据返回给前端
    
11.         response = HttpResponse(output.getvalue(), content_type='application/octet-stream')
    
12.         response['Content-Disposition'] = 'attachment; filename="filename.xls"'
    
13.         return response

复制代码

在上述示例中，根据前端传来的查询条件，从数据库中查询到相应的数据并生成Excel表格。将表格写入BytesIO对象中后，设置响应头，并将BytesIO对象中的数据作为响应内容返回给前端。

注意：以上代码仅供参考，具体的实现方式和细节还需要根据实际情况进行修改和优化。另外，在实际使用中还需要考虑文件下载的安全性等方面的问题。