vue+axios实现post文件下载

本文实例为大家分享了vue+axios实现post文件下载的具体代码,供大家参考,具体内容如下

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

这里是axios的post方法。get方法请点击这里=》here 

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

以及返回了文件流。

第二步:修改axios请求的responseType为blob,以post请求为例:

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实现post文件下载 的全部内容, 来源链接: utcz.com/z/361312.html

回到顶部