vue+axios实现文件下载

Posted 阳光下那抹高傲的轻笑

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue+axios实现文件下载相关的知识,希望对你有一定的参考价值。

功能:点击导出按钮,提交请求,下载excel文件;

第一步:跟后端童鞋确认交付的接口的response header设置了

axios({
    method: \'post\',
    url: \'api/user/\',
    data: {
        firstName: \'Fred\',
        lastName: \'Flintstone\'
    },
    responseType: \'blob\'
}).then(response => {
    this.download(response)
}).catch((error) => {

})

  第三步:请求成功,拿到response后,调用download函数(创建a标签,设置download属性,插入到文档中并click)

methods: {
    // 下载文件
    download (data) {
        if (!data) {
            return
        }
        let url = window.URL.createObjectURL(new Blob([data]))
        let link = document.createElement(\'a\')
        link.style.display = \'none\'
        link.href = url
        link.setAttribute(\'download\', \'excel.xlsx\')

        document.body.appendChild(link)
        link.click()
    }
}

  

以上是关于vue+axios实现文件下载的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段14——Vue的axios网络请求封装

Vue + axios + SpringBoot 2实现导出Excel

vue+axios实现文件下载

php文件如何接受vue前端axios传过来的参数实现登录验证?

回归 | js实用代码片段的封装与总结(持续更新中...)

vue+axios实现文件下载