vue项目中实现文件下载功能


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

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

 1 this.$axios({
 2                     method: 'post',
 3                     url: '/api/market/exportEmployee.do',
 4                     // headers里面设置token
 5                     headers: {
 6                       'Content-Type': 'application/json',
 7                       // "token":window.sessionStorage.getItem('token')
 8                     },
 9                     data: {
10                         'department_id': parseInt(window.sessionStorage.getItem("departmentId")),
11                           'startTime': this.date +'-1',
12                           'endTime': this.date +'-31'
13                     },
14                     // 二进制流文件,一定要设置成blob,默认是json
15                     responseType: 'blob'
16                     
17                 }).then(res => {
18                     console.log(res)
19                     if(!res.data){
20                                return
21                            }
22                            var name = this.date + "月" + this.departmentName +"销售分析统计.xls";
23                            var blob = new Blob([res.data]);
24                            var url = window.URL.createObjectURL(blob);
25                            var aLink = document.createElement("a");
26                            aLink.style.display = "none";
27                            aLink.href = url;
28                            aLink.setAttribute("download", name);
29                            document.body.appendChild(aLink);
30                            aLink.click();
31                            document.body.removeChild(aLink); //下载完成移除元素
32                            window.URL.revokeObjectURL(url); //释放掉blob对象
33                   })

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM