在项目中有前端下载后端文件的需求，一般有以下两种方式
1.后端返回一个路径，直接下载
2.后端返回文件流，前端进行转化后下载
1.返回路径的情况
直接把路径给到a标签进行下载即可
const downloadUrl = `file/path/`;
function download(url) {
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'filename.xlsx';
a.click();
document.body.removeChild(a);
}
download(downloadUrl);
- 返回数据流的情况
使用Blob 数据下载, Blob 对象表示一个不可变、原始数据的类文件对象
axios({
method: 'post',
url: '/export',
responseType: 'blob',
})
.then(res => {
// 假设 data 是返回来的二进制数据
const data = res.data
const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', 'excel.xlsx')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)blob
})
使用这种方法还有一个关键点是设置 responseType: 'blob'，设置生效后打印 res 会显示 blob
坑点：如果在项目中使用了mock数据，responseType: 'blob'设置可能会不生效，这个时候取消掉mock即可。
