方法一 :
用原生请求
GetOrderMainExcel3() {
var url = location.origin + Appsettings.ApiUrl.GetOrderMainExcel; //请求的URl http://localhost:8080/huika/api/orderMain/excel?
var xhr = new XMLHttpRequest(); //定义http请求对象
xhr.open("GET", url, true);
xhr.setRequestHeader("Authorization", LocalStoreUtil.GetObjectExpire(WholeLocalKey.AUTHORIZATION));
xhr.send();
xhr.responseType = "blob"; // 返回类型blob
xhr.onload = function () { // 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑
if (this.status === 200) {
var blob = this.response;
console.log(this.response);
var reader = new FileReader();
reader.readAsDataURL(blob); // 转换为base64,可以直接放入a标签href
reader.onload = function (e) {
var a = document.createElement('a');
a.download = "订单信息.xlsx"; //自定义下载文件名称
a.href = e.target.result;
document.body.appendChild(a)// 修复firefox中无法触发click
a.click();
}
}
}
},
方法二:
vue + axios 封装
注意:一定要将{responseType:'arraybuffer'} 或者 responseType:'blob'
async GetOrderMainExcel() {
if (!this.qurey.startTime || !this.qurey.endTime) {
this.$message.warning('订单时间不低于一天');
return;
}
let data = JSON.parse(JSON.stringify(this.qurey));
data['pageIndex'] = '';
data['pageSize'] = '';
const res = await this.$get(Appsettings.ApiUrl.GetOrderMainExcel, data, null, 'blob') //responseType: 'blob'
if (!res) { return }
let link = document.createElement('a')
let url = window.URL.createObjectURL(new Blob([res], { type: 'application/vnd.ms-excel' }))
link.style.display = 'none'
link.href = url;
link.setAttribute('download', '订单信息.xlsx')
document.body.appendChild(link)
link.click()
},
blob 详解也可参考 https://segmentfault.com/a/1190000020540788