vue+axios实现post文件下载

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

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

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

vue+axios实现post文件下载

以及返回了文件流。

第二步:修改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() } }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/3a3e7e3fbe3c438c440dad28ea23ed67.html