8-前端接收后台返回的二进制流

93 阅读1分钟

前端发送请求给后台获取execel文档

注意:需要使用原生的axios来发送请求,代码如下:

参考

//向后台访问,并返回execel文档
let url = 'xxxx/export'
let params = {       
	ids: ids//ids为需要在execel中生成的记录id
}
axios({
    method: 'post',
    url: url,
    data: params,         
    responseType: 'arraybuffer',
    //这个为转码,有时候需要携带
    transformRequest: [function (data) {
        let ret = '';
        for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
    }
        ret = ret.substring(0, ret.length - 1);
        return ret;
    }],
    //请求头内容,有时候需要添加token
    headers: {
    'Content-Type': 'application/x-www-form-urlencoded'            
    }       
}).then(res => {
	//下面根据返回的内容,设置execel下载下来的文件名称是什么,也可以直接在a.link的setAttribute中设置固定名称
    let str = res.headers['content-disposition']
    let str3="execel名称"
    if(res.headers['content-disposition']){
    	let strLength = 'attachment;filename='.length
    	str3 = decodeURIComponent(str.slice(strLength))   
	}
	//对返回内容使用a标签进行下载
    const data = res.data
    const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
    const link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', str3)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
})