1.点击链接
数据、文件格式全部在后台封装好,返回给前端一个链接,前端通过点击链接自动下载,两种方式:
1 (1)window.location.href = ‘url’2 (2)
2.解析后台返回的文件流
这种方式就是后台将要导出的文件以文件流的方式返回给前端,前端通过blob去解析,再动态创建a标签。
![cf1fa666894131fcbc9d4a21eb4d16b8.gif](https://img-blog.csdnimg.cn/img_convert/cf1fa666894131fcbc9d4a21eb4d16b8.gif)
1 // 发请求 2 this.axios.post(url, {param: paramName}, {responseType: 'arraybuffer'}).then(res => { 3 let content = res.data; // 文件流 4 let blob = new Blob([content],{type: 'application/octet-stream'}); 5 let fileName = 'filename.xls'; 6 // 如果后端返回文件名 7 // let contentDisposition = res.headers['content-disposition']; 8 // let fileName = decodeURI(contentDisposition.split('=')[1]); 9 if ('download' in document.createElement('a')) { // 非IE下载10 let link = document.createElement('a');11 link.download = fileName;12 link.style.display = 'none';13 link.href = URL.createObjectURL(blob);14 document.body.appendChild(link);15 link.click();16 URL.revokeObjectURL(link.href) ; // 释放URL 对象17 document.body.removeChild(link);18 } else { // IE10+下载19 navigator.msSaveBlob(blob,fileName);20 }21 })