EmberJS调用Django后端返回Excel时出现JSON解析语法错误

这个问题我太熟了！本质是前端默认把后端响应当成JSON解析，但后端返回的是二进制Excel文件，所以才会报JSON解析错误——毕竟Excel文件的开头字符根本不是JSON格式的，浏览器一解析就懵了，抛出Unexpected token P的错误。

1. 调整Ember的AJAX请求，处理二进制文件 #

Ember依赖的jQuery AJAX默认会自动解析JSON响应，我们需要修改参数，告诉它接收二进制Blob数据，然后触发浏览器下载：

// Ember中发起请求的示例代码
$.ajax({
  url: '/your-django-api-endpoint/',
  type: 'POST',
  data: { id: targetId }, // 传入你要查询的ID
  xhrFields: {
    responseType: 'blob' // 关键：让XHR接收二进制Blob格式，不解析JSON
  },
  success: function(blob) {
    // 创建临时下载链接，触发浏览器下载
    const downloadUrl = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = downloadUrl;
    link.download = 'data-export.xlsx'; // 设置下载后的文件名
    document.body.appendChild(link);
    link.click();
    // 清理临时资源
    window.URL.revokeObjectURL(downloadUrl);
    document.body.removeChild(link);
  },
  error: function(xhr, status, err) {
    console.error('下载失败:', err);
  }
});

2. 确保Django后端返回正确的响应头 #

后端生成xlsx文件后，一定要设置对应MIME类型和下载头，让浏览器识别这是可下载的Excel文件，而不是普通接口响应：

# Django视图函数示例
from django.http import HttpResponse
import io
from openpyxl import Workbook # 假设用openpyxl生成xlsx

def export_excel(request):
    if request.method == 'POST':
        target_id = request.POST.get('id')
        # 你的现有逻辑：根据ID查询数据、生成xlsx
        wb = Workbook()
        ws = wb.active
        ws['A1'] = '导出数据'
        # ... 填充你的业务数据 ...
        
        # 将xlsx写入字节流
        output_stream = io.BytesIO()
        wb.save(output_stream)
        output_stream.seek(0)
        
        # 构造响应，设置正确的头信息
        response = HttpResponse(
            output_stream,
            content_type='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        )
        response['Content-Disposition'] = 'attachment; filename="exported-data.xlsx"'
        return response

这里要注意：

• content_type必须对应xlsx的标准MIME类型，老版xls文件用application/vnd.ms-excel
• Content-Disposition里的attachment会强制浏览器弹出下载框，而不是直接打开文件

为啥之前会报错？ #

之前的前端请求没设置responseType: 'blob'，jQuery默认把后端返回的二进制Excel文件当成JSON去解析，但xlsx本质是压缩包，开头字符是PK，完全不符合JSON格式，所以直接抛出了解析错误。

内容的提问来源于stack exchange，提问作者TJB