平时常用导出都是用window.open方法 点击跳转连接:使用 window.open 下载
const downError = `地址?&参数=${参数|| ''}`;
const downError = `Url+/xxx/xxx?&orgId=${orgId || ''}`;
window.open(downError, "_self");//调用window.open方法导出
而使用window.open时有时候会出现接口异常、或者部分浏览器可能兼容性问题导致会跳转连接白屏的问题
现在用后端接口返回的数据流然后导出(切记添加responseType: 'blob',)
首先配置一下request
export const exportPersonnel = (params) => request({
url: BaseUrl + '/xxx/xxxx',
headers: {
"Project-Id": params.projectId,
},
method: 'get',
responseType: 'blob', //非常关键!文件流方法
params,
})
请求:
const params = {
test: '参数1',
test2: '参数2',
}
this.props.dispatch({
type: 'TimelySummary/exportArchiveInfo',
payload: params,
}).then((ret: any) => {
if (ret) {
let blob = new Blob([ret],);
let objectUrl = (window.URL || window.webkitURL).createObjectURL(blob);
let downFile = document.createElement("a");
let fileName = "孜然卷测试报表.xlsx"; //报表名
downFile.style.display = "none";
downFile.href = objectUrl;
downFile.download = fileName; // 下载后文件名
document.body.appendChild(downFile);
downFile.click();
document.body.removeChild(downFile); // 下载完成移除元素
window.URL.revokeObjectURL(objectUrl); // 只要映射存在,Blob就不能进行垃圾回收,因此一旦不再需要引用,就必须小心撤销URL,释放掉blob对象。
}
})
另外post请求可查看文章 点击跳转连接:POST请求导出后端返回数据流