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 // 点击下载后释放标签 24 link.click() 25 link.remove() 26 })
第五行:responseType详解
第七八行:blob 下载文件时 type 类型大全
第十行:blob 对象详解
如果下载文件不是 xls 文件,也可用此套代码,只需要更改 对应文件的 type 值和文件的扩展名即可(即代码红色字体内容)。