用 post 请求下载文件，优雅而美丽

引言

通过 window.open(url) 的方法下载文件，需要打开一个新的页面下载，影响用户体验。

且如果参数数据量大，用 url 挂参的方式也不方便。

用 post 下载文件，即可解决上述问题，优雅而美丽！

后端

后端需要将下载的接口的response header设置以下：

Content-disposition: attachment; filename=name.xlsx
Content-Type:application/octet-stream

前端

前端需修改 axios 请求的 responseType 为blob，然后创建 a 标签，模拟 a 标签点击：

axios({
    method: 'post',
    url: '接口地址',
    data: formData,// 提交的数据
    responseType: 'blob'
}).then(response => {
    let data=response.data // 根据返回拿到 Blob 的数据
    if (!data) {
            return
        }
        let url = window.URL.createObjectURL(new Blob([data]))
        let link = document.createElement('a') // 创建<a>标签
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', 'name.xlsx')
        document.body.appendChild(link)
        link.click() // 模拟点击<a>标签
}).catch((error) => {
	console.log(error)
})

亲测有效。

结语

再也不要 window.open 啦！

争做一个"有洁癖"的 programmer！