Axios 下载后端返回的文件

一般来说后端返回的都是FileResponse，在前端设置返回值的类型为 blob，但是我们还想给一些其他的数据字段，这时候就不能用 blob类型了，所以这里还是设置返回值为json格式，以Django+Axios 为例，请求后文件就会自动下载了

# Django 代码import io, base64@csrf_exempt
def export_task(request):export_file = '\n'.join([123,456,789])buffer = io.BytesIO()with zipfile.ZipFile(buffer, 'w') as zipf:zipf.writestr("1.txt", export_file)buffer.seek(0)data = {"name": "1.zip", "file": str(base64.b64encode(buffer.getvalue()).decode('utf-8'))}return JsonResponse({"code": 0, "status": "success", "msg": "导出成功", "data": data})

// Axios 代码部分export const task_export = async () => {return await http.post('http:127.0.0.1:8080/api/task/task_export/')
}const base64ToBlob = (base64:any) => {const byteCharacters = atob(base64);const byteNumbers = new Array(byteCharacters.length);for (let i = 0; i < byteCharacters.length; i++) byteNumbers[i] = byteCharacters.charCodeAt(i);const byteArray = new Uint8Array(byteNumbers);return new Blob([byteArray], { type: 'application/octet-stream' });
}
const downloadFile = (base64Data:any,filename:string) => {const blob = base64ToBlob(base64Data);const url = window.URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = filename;a.style.display = 'none';document.body.appendChild(a);a.click();window.URL.revokeObjectURL(url);document.body.removeChild(a);
}
const task_export_fn = () => {task_export().then((res:any) => {if (res.code == -1) console.log(res.msg)else {downloadFile(res.data.file, res.data.name)console.log("导出成功")}})
}