需求:需要请求后台的接口后浏览器导出excel文件,有两种方法。
方法一、直接地址跳转
window.location.href = `地址` //地址在后台的接口上有显示,直接拿过来就行, 这种方法可以在不需要用户验证的情况下使用。若有设置验证需要添加请求头使用方法二。
方法二、
请求接口,添加请求头
问题:调接口导出excel,在IE上请求成功后没反应,其他浏览器可实现。
解决: IE的文件下载方式和其他浏览器不同,需要添加判断
代码:
const href = `接口地址`
const token = localStorage.getItem('sms-token');//获取请求头
axios.get(href,{
headers: {
'Content-Type': 'application/json',
'Authorization': `${token}`,//添加请求头,没有登入无法调取级
},
responseType:'blob' //转化后台传过来的文件流。很重要!
},
)
.then(res=>{
console.log(res)
var csvData = new Blob([res.data]);
var file_name = '表格名称.xlsx'
this.setState({
loading:false
})
// for IE 判断是否IE
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(csvData, file_name);
}
// for Non-IE (chrome, firefox etc.)
else {
var a = document.createElement('a');
document.body.appendChild(a);
a.style = 'display: none';
var url = window.URL.createObjectURL(csvData);
a.href = url;
a.download = file_name;
a.click();
a.remove();
window.URL.revokeObjectURL(url);
}