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

「已注销」

于 2020-06-23 14:19:51 发布

阅读量501

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript 代码规范

本文链接：https://blog.csdn.net/qq_37969897/article/details/106922072

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用POST方法和Blob对象实现的文件下载方法，避免了window.open带来的用户体验问题和参数限制。通过设置responseHeader和调整axios配置，前端可以无缝触发文件下载，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言

通过 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)
})

亲测有效。