业务场景是需要想后台传一些检索的参数， 后台返回对应的查到的数据生成excel文件，然后通过文件流的方式交给前台。
第一种方法。
我这边能想到的两种办法第一种是，因为是接口是get类型，所以最简单的就是window.location.href = 接口地址+参数， 把参数直接拼到url上， 如果参数复杂的可以通过表单提交 post请求去操作。 这种方法可以直接下载，不涉及返回参。也是比较通用的。
第二种方法就是通过调用接口，后台返回流的形式，前台通过blob接收。我这个场景用的是这种方法。
具体方法代码贴在下面
exportexcel(params = {}) {
let that = this
getExcel(Object.assign(params, that.query)).then(res => {
const fileName = decodeURI(
res.headers[‘content-disposition’].split(’=’)[1]
) //这个是获取文件名字，正常应该都是在headers的content-disposition里，也可以前台自定义。
let objectUrl = URL.createObjectURL(new Blob([res.data]))
// 文件地址
const link = document.createElement(‘a’)
link.download = fileName
link.href = objectUrl
link.click()
})
},
封装的axios方法
export const getExcel = (params) => {
return request({
url: ‘/api/BillSummerExcel/customerExport’,
method: ‘get’,
params: {
…params,
},
responseType: ‘blob’ //一定要设置这个 不然会乱码
})
}。
关键的部分来了，昨天处理了一下午。前台找问题，后台找问题找了好久。最后还是在网上找到了解决办法。 上面标注了， 请求中设置 responseType: 'blob’是重点， 但是昨天测试中设置了这个，后台返回的res中的data依然是二进制的流， 按理说data中返回的应该是一个blob对象。 开始以为是后台的问题，因为responseType: ‘blob’ 需要服务端兼容， 如果后台是强制性的返回二进制的流则无法转blob，然后后台排查， 发现代码没有问题。 然后上网搜了好久， 终于发现一个同样经历的， 是因为在开发的时候， 引入了mockjs
,这个js源码中会把原生ajax请求的responseType: 设置为 ‘’, 所以我们在请求中写的responseType: ‘blob’ 并没有生效被覆盖了。 把引入mock模块的代码注释掉再试就ok了。
第一次写文章，记录一下遇到的坑。
补充一点 关于异常的处理， 因为我们设置的responseType类型为blob 所以异常返回json也被转换成了blob，
只需要在处理异常的时候把res.data重新转换为json就行了。代码贴在下面
var reader = new FileReader()
reader.onload = e => {
console.log(JSON.parse(e.target.result).message)
}
reader.readAsText(res.data)
如果之前设置了拦截器统一处理异常的话，只需要在拦截器里加入判断就可以了
if (res.data.constructor == Blob){
}
判断一下返回的data是否属于blob类型， 属于就转换成json。
