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