前端实现文件下载
1 axios({ 2 method: 'POST', 3 url: URL.baseUrl + '/baseInfo/XXXXXXXXXX', 4 data: regionInfo, // 你要传输的数据 我这里是 regionInfo 一个对象，不具体列出 5 responseType: 'blob' // 设置返回文件流为 blob 数据流 6 }).then(res => { 7 const type = 8 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' 9 // 创建 blob 对象 res.data：blob 数据流内容 type：默认值为 ""，它代表了将会被放入到blob中的数组内容的MIME类型 10 let blob = new window.Blob([res.data], { type: type }) 11 // 创建文件下载地址（或者是图片资源地址） 12 let requestUrl = window.URL.createObjectURL(blob) 13 // 创建一个 a 标签 14 let link = document.createElement('a') 15 // 设置标签为不可见 16 link.style.display = 'none' 17 // 设置 a 标签链接地址为 文件下载地址（或者是图片资源地址） 18 link.href = requestUrl 19 // HTML5中给a标签增加了一个download属性，只要有这个属性，点击这个链接时浏览器就不在打开链接指向的文件，而是改为下载（目前只有chrome、firefox和opera支持） 第二个参数为自定义下载的文件名 20 link.setAttribute('download', `XXXX.xls`) 21 // 向 body 追加 a 标签 22 document.body.appendChild(link) 23 link.click() 24 link.remove() 25 })
使用背景：后端返回内容为文件流
使用场景：一般用于 “XX下载”，“XX导出” 等 地方
第五行：responseType详解
第七八行：blob 下载文件时 type 类型大全
第十行：blob 对象详解
如果下载文件不是 xls 文件，也可用此套代码，只需要更改（代码红色字体内容）：
1. type 为对应文件的类型值（可参考 blob 下载文件时 type 类型大全）；
2. 文件的扩展名。
