axios接受文件流并下载

需求场景

前端发送请求,后端传回文件流,前端接受到后立刻打开下载窗口下载文件

注意事项

请求api需要添加:responseType:'blob' , axios拦截器拦截错误状态码 (假设是code) 那里的ifres.code != 200改为res.code && res.code != 你们约定的成功状态码

如果不添加responseType:'blob' ,那么无法解析响应数据, 会出现乱码

这是解析后的响应信息,我们下载文件需要用到data里的数据

请求API封装

js 复制代码
import request from '@/utils/request'

export function downloadExcel(semesterId){
  return request({
    url: '你的请求接口',
    method: 'GET',
    params:{
      semesterId
    },
    responseType:'blob'  // 重点
  })
}

接收响应数据并下载

以我获取excel文件并下载为例

总体思路都是: 获取url、创建<a>标签,设置href,触发其click事件,完成下载,移除<a>标签

js 复制代码
            downloadExcel(this.semesterId)
            .then(data => {
            	// 我这里在拦截器里直接返回的response.data
                if(!data){
                    this.$message.error('获取Excel文件失败')
                    return;
                }

                let fileUrl = window.URL.createObjectURL(new Blob([data]))
                let a = document.createElement('a')
                a.style.display = "none"
                a.href = fileUrl
                a.setAttribute('download', `${this.semesterName}积分排行榜.xlsx`) // 注意文件后缀
                document.body.appendChild(a)
                a.click()
                window.URL.revokeObjectURL(a.href)
                document.body.removeChild(a)
            }).catch ((e) => {
                console.log("文件下载出错: ", e)
             }) 
相关推荐
xw5几秒前
uni-app项目支付宝端Input不受控
前端·uni-app·支付宝
大翻哥哥15 分钟前
Python上下文管理器进阶指南:不仅仅是with语句
前端·javascript·python
IT_陈寒28 分钟前
React 性能优化必杀技:这5个Hook组合让你的应用提速50%!
前端·人工智能·后端
再吃一根胡萝卜43 分钟前
Git 强制推送指南:新手必读的「危险操作」解析
前端
诚实可靠王大锤1 小时前
react-native项目通过华为OBS预签名url实现前端直传
前端·react native·华为
Monly211 小时前
Vue:下拉框多选影响行高
前端·javascript·vue.js
是罐装可乐1 小时前
前端架构知识体系:Source Map 的用法和全面解析
前端·映射·前端架构·代码安全·源码地图·source-map
小桥风满袖1 小时前
极简三分钟ES6 - ES8中对象扩展
前端·javascript
武昌库里写JAVA1 小时前
Mac下Python3安装
java·vue.js·spring boot·sql·学习
代码的余温1 小时前
Web服务器VS应用服务器:核心差异解析
运维·服务器·前端